So I would like to have the background of the body be one gif that fills the entire thing. It won't show up.
<style type="text/css">
body{
width:100vw;
height:100vh;
background-image: url("The More You Know1.gif");
background-size: cover;
}
</style>
Spaces don't work in the title of assets. Replace all spaces in the image name with %20 in your CSS, or change the file name to feature underscores or hyphens in the place of each space.
Fix #1
background-image: url("The%20More%20You%20Know1.gif");
Fix #2
Change the file name to TheMoreYouKnow.gif and update your CSS accordingly.
If the file still doesn't load, check your file structure to make sure that your GIF is located in the same directory as your index.html file. If it isn't, you need to navigate to it in your css like this:
background-image: url("/images/The%20More%20You%20Know1.gif");
Related
I'm having trouble getting my background image to show on all of my html pages. I was able to get the image to be the full background on all pages before, but after I put the image into a folder in my project, it's no longer working. I have a folder called images inside of my project that contains the image I want to use as my background so I added the images/ path. I double checked the name of the folder, name of my image, and also to see if its a jpg (which it is). I also checked my CSS code and no not have body mentioned anywhere else or background-image anywhere else. Can't think of anything else I'm doing wrong. Any suggestions? Thanks!
body{
background-image: url(images/main.jpg);
background-repeat: no-repeat;
background-size: cover;
}
If the images directory is next to the css file then it will be like this
background-image: url(./images/main.jpg);
but if the style file is inside a directory next to the images directory, then it will be like this
background-image: url(../images/main.jpg);
I have a problem which is my background image doesn't show up. I am sure that my url is correct (Because I have used this url in other aspects).
This is my css file:
body{
background : url(assets/image/main.jpg);
background-size: cover;
}
so what happened?
This is my folder's structure:
/assets/
css/
style.css
image/
main.jpg
/index.html
Remove the space between background : and add quotes to your URL string so it looks like background: url("assets/image/main.jpg");
Beyond that just ensure that the filepath from this css file still maps to that folder correctly, just because it works in one css file doesn't mean it works in another if the folder structure differs.
Your code is correct.
You should know that the path is relative to the location of the style (and not the html).
The fact of having used this code elsewhere does not mean that the path is correct here.
After that may be the image which is corrupt.
we are about 10 danish people from an IT class in Denmark, and we have discovered that the background-image thing in css isnt really working like we want it to.. Maybe anyone out there can help us?
I personally havent worked much with the problem, but my friend Jacob (Who is busy atm so he cant write this for himself) has used like the past hour on figuring out how it works.
What he has found is, that it works when you give it a URL like:
background-image: url("i.imgur.com/AO4oM9a.jpg");
It will work just fine, but if you try with a local file:
background-image: url("images\background.jpg");
It wont work, we have tried some different stuff, like putting in the full destination of the file, like "c:/desktop/website/images/background.jpg" you know, (Probably not valid, i just typed something so you would understand what i meant by full destination).
Anyone know how or why this wont work?
BTW we are doing it in the HTML tag in a .css file, like:
html { background-image: url("images\background.jpg"); }
You are using back slash (\) instead of forward slash (/). And other thing to remember is you should give correct path of image.
if your css file and image is in same folder than you can do like this
html {
background-image: url("background.jpg");
}
if your css is inside css folder and in same directory you have your image inside images folder then you can do like this
html {
background-image: url("../images/background.jpg");
}
Try to use like this:
html { background-image: url("/images/background.jpg"); }
Or
html { background-image: url("images/background.jpg"); }
Try this one:
html { background-image: url("../images/background.jpg"); }
Just write:
background:url('../images/background.jpg');
Add more css as:
background-size:cover; min-height:400px; width:100%;
background-position:center center;
See below working example:
/*--CSS--*/
.image-box{background:url("https://cdn.pixabay.com/photo/2014/03/22/22/05/sunbeam-292987_960_720.jpg");
background-size:cover;
min-height:300px;
background-repeat:no-repeat;
background-position:center center;
}
<!--HTML-->
<div class="image-box">
<h1>This example</h1>
</div>
This may help:
always remember to give background image in style.css(css file) and if you have no choice left then define it in HTML and always keep images and css files in a folder names assets and then you can call them out easily.
background-image: url('assets/TYdollarsign.jpg');
I need to create a small website that can be opened and functional in a single file. I can't quite figure out how to get an image background to show up. I have my image in Desktop/assignment/Website-Background.jpg. I have tried a bunch of different ways to get it to work, but it just wont. My current code is:
body{
height: 100%;
}
.bg {
background-image: url("Website-Background.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
And I have tried also tried
body {
background-image: url("Website-Background.jpg");
}
Can somebody point out what I'm doing wrong?
First in your browser press F12 and youll see if the image is being called or not in the console window, Then if it is being called and there is no error then maybe set a height of 200px and see if the image shows up.
I do not believe you are indicating the location of the image properly. Remember for CSS, you have to back out of folders and go into others to find the file. Where is your HTML file? You may have to back out of its location and into your assignment folder.
If you are backing out:
body {
background:url("../assignment/Website-background.jpg");
background-size:cover;
}
If you simply have to go deeper into your folder:
body {
background:url("assignment/Website-background.jpg");
background-size:cover;
}
Just a side note that if you "really" want to have your website as a single file (meaning that background image is another file), you can encode your image into base64 via some tool (like) and then have it in your file.
Just put the image and your html document in the same folder and your code will work like a charm...You will have to change nothing in code to make it work..
I changed my main image to a css background property but when i open my index.html the image does not show up.
I used the following property inside my custom.css file.
background: url("/img/banner-bg.jpg");
background-repeat: no-repeat;
height: 80%;
background-attachment: fixed;
background-position: center center;
background-size: contain;
However the weird is when i try to live preview with brackets it is showing up just fine.
Put trailing dots before your img folder path and make sure the file is in the folder
If that doesn't work, find the image in explorer, right click to get the properties and find the full image path. Use the full image path preceded by
file://
e.g.
background-image:url("file:///C:/Users/Rachel/SkyDrive/webdesign/img/banner-bg.jpg");
and that should work
I think the problem is a slash at the start of the string. There's a difference between if you start path with slash or not.
For example if you working on localhost and path to the folder where the css file exists looks like that:
localhost/yourProjectFolder/and/all/of/subfolders/
With slash:
background: url("/img/banner-bg.jpg");
//returns absolute path : localhost/img/banner-bg.jpg
Without slash:
background: url("img/banner-bg.jpg");
// returns absolute path : localhost/yourProjectFolder/and/all/of/subfolders/img/banner-bg.jpg