Can't set background image in css
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 th开发者_StackOverflow社区e 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!
加载中,请稍侯......
精彩评论