- Applying a background color to an HTML element in a web page fills that container with the specified color.
- It enhances your web page visual appeal and makes the container stand out.
- It can also add contrast between the content of that block with its surrounding.
- A background image allows you to get more graphic design and creative effect to the HTML block it’s applied to.
- A background image comes particularly handy for creating round corners rectangles without adding too much HTML markup.
- Using a background image is almost unavoidable for achieving gradient effects applied to web page blocks such as the navigation bar.
Let’s explore how to use CSS to apply a background color and a background image to any HTML element in your web page.
1- Background Color
background-color: #FFFFFF;
This CSS property applies a white (#FFFFFF) background color to the HTML container it is applied to.
2- Background Image
background-image: url(images/bgheader.gif);
The value “images/bgheader.gif” in url defines the relative HTML path to the background image graphic (bgheader.gif in this example).
This HTML path can be absolute: url(http://livetrainingsession.com/images/bgheader.gif)
or relative to the location of the external style sheet file where the CSS style is defined.
If your CSS style is embedded in the web page, then the url path will be relative to that webpage.
3- Background Image Tiling
background-image: url(images/bgheader.gif) repeat;
The background image will be then tiled in both the horizontal (x) and vertical (y) directions to fill the entire surface of the HTML container this background-image is applied to.
The tiling effect in the x-axis will be only be visible if the width of the background image is smaller then the width of the HTML container. The same goes for the vertical y-axis.
If however all you need is for the background image to tile in just one direction within its container, all you need is specify the axis along which the tiling would take place:
background: url(/images/bgimage.jpg) repeat x;
would instruct the web browser to tile (or repeat) the background image horizontally (along the x axis) from left to right.
background: url(/images/bgimage.jpg) repeat y;
would create the effects of the background image tiling along the vertical direction (y axis) from top to bottom.
As you already suspected when the tiling need to be done along both directions (x and y) there is no need to specify either one of them. It’s the default behavior.
4- Background Image Attachment
background-image: url(images/bgheader.gif) repeat fixed;
The “fixed” background attachment keeps the background image in the same spot while the content of the HTML container is scrolled.
This behavior can be particularly desirable when applying a company logo as the background image of the HTML “body” tag of a web page.
background-image: url(images/bgheader.gif) repeat scroll;
The background will move along when all the content is scrolled within the container. The “scroll” value of the background attachment is the default behavior. That means, there is really no need to specify the background attachment “scroll” value.
5- Background Image Position
You can specify the placement of the background image within the HTML element it’s applied to.
background: url(/images/bgimage.jpg) no-repeat 10px 15px;
The background image applied to the HTML container will not be tiled (no-repeat) and is positioned 10 pixels from the left edge and 15 pixels from the top edge of its container. We define pixels as the measurement unit but you could choose any other valid units such as points (pt), inches (in), cm, ems, percentage (%) and so on.
In most cases you certainly would want the background image to start at the top left corner of the container box. In that case w you would set:
background-image: url(/images/bgimage.jpg) no-repeat 0 0;
The x and y position of the background image are 0. In this instance there is no need specify the measurement unit.
background: url(/images/bgimage.jpg) no-repeat left top;
Instead using the value 0 0 to position the background image, you could use “left” “top” to achieve the same result of align the background image with the top-left corner.
It’s worth mentioning that when a background image is repeated (repeat, repeat-x or repeat-y), you can not define a position x, y where the tiling
6- Background Color & Background Image
As with most CSS properties, there is a shorthand way to define both the background color and the background image properties in a more compact form to reduce your style sheet file size.
The generic form is :
background: color url(path to background image) repeat attachment position;
Therefore to apply a white background color and a background image to a HTML element with an CSS identifier #header, you would write:
#header{
background: #FFFFFF url(images/bgheader.gif) no-repeat 10px 15px;
}
With CSS3 you can in theory apply more than one background image to any HTML container.
Unfortunately just like other recommendations made by the W3C (Worldwide Web Consortium) not all major browsers support this new feature notably IE6, IE7 and IE8. In the meantime, you would have to combine some HTML and CSS tricks to apply multiple background images to a given block in your web page layout.
