Unable to set background image for specific div
Some strange background image behavior
HTML
<body> <div id="divGaLL"> <ul id="ulGaLL"> <li>...</li> <li>...</li> </ul> </div> </body> CSS
body{ background:url(img/back01.jpg); //works } #divGaLL{ background:red; // works background:url(img/back01.jpg); //doesn't work } #ulGaLL{ background:url(img/back01.jpg); //works } Why can't I set back01.jpg as the background for #divGaLL ?
The background property is a shorthand for setting a set of properties, including background-image . If you want to specify a background color or background image without overlapping anything else, you must specify background-color and background-image full:
#divGaLL { background-color: red; background-image: url(img/back01.jpg); } See "background" in MDN .
You need to use
background-image: url('img/back01.jpg');
or for example
background: red url('img/back01.jpg') left top no-repeat;
Try to adhere to this order of "arguments" if possible;)
I prefer to use the second method, however sometimes, when you just need to change one thing, it is better to use only the first approach.
It is always useful to determine the height and width and update that this element is a block , not an inline style, etc., if to prevent unwanted behavior, use something like:
display: block; width: 150px; height: 150px; background: red url('img/back01.jpg') left top no-repeat; If you put the image in your HTML, you can use something like this:
#divGaLL img{ background-color:red;} Instead of the whole div, only IMG will be used.
And yes, not only use the background for definition, since the background is used for all kinds of different things, but only for img or color.
Therefore, always use a background color, background image, or whatever you want with it