I'm trying to put in a background image for my website and the background remains white. On inspect element it says that my image could not be found.
The CSS file is linked with the HTML file because other images work, and the full directory is:
F:\Pete\Web Design\Assignment\images\background.jpg
Image link for the error, if it helps:
body{
background-image:url(images\background.jpg);
}
This is the code for the background image I'm using.
Try using a Forward-Slash /
body{
background-image:url(images/background.jpg);
}
If you have your CSS in a subfolder, the following may solve the problem:
body{
background-image:url("../images/background.jpg");
}
Put your path in quote
body{
background-image:url("images/background.jpg");
}
If it is different it will not work.
F:\Pete\Web Design\Assignment\images\background.jpg
F:\Pete\Web Design\Assignment\index.html
Related
what the CSS file looks like:
h1{
.....
}
body{
background-image: url(/img/back.png) ;
}
what the files hierarchy looks like:
img(file containing the images)
-back.png(the background image i want to keep as background)
.css
.html
i am not sure why the image is not loading even though i have used relative path to the css file as suggested by the asnwers in past questions similar to this. if anyone can help thank you.
The rest of CSS is working just a problem with this background-image issue
My background image not appearing in WordPress though I have included this code in my style.css
body{
background: url("/wp-content/themes/my_theme/images.png");
}
Please help.
To add the theme background image in wordpress add the below code in css file .Used ../ to go to folder instead of using the full path
body{
background: url("../images.png");
}
body { background: url("./images.png");}
I tried this out with a test site local hosted on XAMPP. Single dot for relative URL in the same directory, it must be a Wordpress/localhost thing because usually just "images.png" works.
okay I find it out.
My wp-content folder was also inside a folder named wordpress.
so the correct code would be :
body {
background : url("/wordpress/wp-content/themes/my_theme/images.png");
}
I do not know what the problem is. I made a style.css and used this as my code
.jumbotron {
background-image:url(images/bikebg.jpg);
margin-top:-20px
}
before putting the background in the images folder, it worked fine. But since I changed it, it will no longer work. The site is live here http://bikesite.web44.net/bikes.html
try this
.jumbotron {
background-image:url(../images/bikebg.jpg);
margin-top:-20px
}
your folder path was wrong
try
url(../images/bikebg.jpg);
I am trying to set my background image of the page via CSS using the following code, but no image shows up. The image will be tiled on the page and is only 10x10px big. Nonetheless, it still doesn't show up. Please can you tell me what I am doing wrong?
<body>
<div id="background"></div>
</body>
#background {
background-image: url("img/background.png");
}
Is the image in linkToCssFolder/img/background.png? The image path is relative to your CSS file.
Also, does your #background div have content in it? If not, it will probably have the default 0px height, and not show any background.
You need to give the element dimensions too...
#background {
width: 10px;
height: 10px;
}
Background images do not make their container stretch to fit.
Here is a list of all CSS keywords
Just tried this at http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple and it works.
I assume your image is not at right location or if the background property is being over written by style or another css rule.
such a no brainer thingy of css and html often forgotten even professional due lack of proper focus and just being tired.If you knew it just rest for a while.
here are some tips if you lost in the tree of web design.
Check the files if it is there, the file type and support for the file in your browsers
Check the directory if you are online you can put all the URL of the file OR use "../" if your css and the image file is in different level of directory.
Check your syntax.
rest, take a nap or have a coffee break.
Firstly check your CSS and image location
1) Both in same folder then try " background-image: url("background.jpg") " simply.
2) If you have img folder and image inside this folder then try " background-image: url("img/background.jpg"); "
3)If you have img folder and If you have CSS folder then you have to go one step back then goes to image folder and choose image it seem like this " background-image: url("../img/background.jpg"); " where '..'represent one step back
#background {background-image: url("img/background.png"); height:300px;}
add height element in css
Another source of error may come from image extension name, for instance in :
background-image: url("img/background.png")
Image name must be "background" and NOT "background.png"
Image "background" must be a PNG and not another image type like JPG
Hy,
to get your image you must imagine that you are in a terminal(or cmd prompt) and write as youuld do to get to the image.
So let us say that your css file is /css/ and you image is in /img/background.png.
To get to the image you must write this code background-image: url("../img/background.png");
This is because in terminal/cmd prompt to get to the image from your .css file you would first type cd .., then cd img, then background.png. Hope it will help you!
Cheers!
I am using the following code, but it is having no effect!! Can this be done?
html {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
This will work if you actually have an image at the specified location, although it's usually applied to the body element. It could be that the body element has a background colour that is covering the image.
Note that paths are relative to the style sheet file, not the HTML file embedding it, so a path pointing to images/repeat-x.png in /css/styles.css would result in /css/images/repeat-x.png.
Yes, it can be done, but it needs to be on the <body> tag.
Your image might not exist, or you might have a different background covering it.
If you are trying to set the background of the entire page I'd recommend:
body {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
make sure the url is correct, you can use browser debug tool like Firebug in firefox to inspect the html