Can't set background image in css_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-03 16:00 出处：网络

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. Nonethe

相关专题：background css

<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!