Why We Set A Background Color When Using Repeated Background Images
This is just a CSS experiment.
You may have seen code like this:
background:url("/images/repeated_bg.png") repeat scroll center top red;
But wait, why is the color set to red when the image is repeated everywhere?
1.
In Firefox, install the Web Developer add-on. Now go to Images > Disable All Images.
You can now see that the text is not visible if the text color is white. It worked earlier because there was a background image behind the text.
Suppose you design your UI for desktop users. Now someone uses a mobile or tablet device to access your website. Some browsers manipulate the code to make it work on mobile. At that point, it may break. If the text goes outside the image, it will not work well.
3.
For example, look at http://emberjs.com/, then open Web Developer and disable images once again. You will see that the navigation does not work well.
Open Firebug and check this code:
header{
background: url("/images/navigation_background.png") repeat scroll center top transparent;
}
Now change the transparent color to red, which is nearly the same as the background image color in the background property, and it will work.
--
If a non-repeated image is set in the background property, do I also need to define a background color?
This is a good question. Effectively, this color will be shown when your image is broken. When you define the image tag (), it takes up space depending on the size of the image. If your code has CSS width and height properties on the img tag, the browser will make the image smaller. It will not crop it like Photoshop does. In that case, you can define the color that will be seen when the image is broken.
If you don't know about alt and title attributes, the alternative text from the alt attribute on the img tag will be shown when the image is broken. The title text from the title attribute on the img tag is shown when the image is hovered by the cursor.
I think this helps describe why we need to set the background color in the background property when we use repeated background images.
