Css Background Properties

Background of a website is normally built by two elements, they're Css and Html Element. The Css element styles the background effects/acts like the width, height, color, border, etc. While the Html element functions to call/show the background that's styled by Css properties.

CSS properties that are commonly used to style the background effects are:

*background-color
*background-image
*background-repeat
*background-attachment
*background-position

The Background Color Property

This property is used to specify the background color and it is defined in the body selector. Example:

body {background-color:#FFFFFF;} or body {background-color:rgb(255,0,0);} or body {background-color:red;}

The Background Image Property

This property is used to specify an image as the background. By default the image is repeated so it covers the entire background, but you can still add another property to style it the way you want using the "background-repeat" property. Example:

body {background-image:url('http://j-smith-site.blogspot.com/background-image.gif'); background-repeat:repeat-x;}

The background-repeat property has some values like repeat-x which repeats horizontally, or no-repeat, etc. - You can also set the position of an image if it's to fit the content or the entire background. The position of an image is specified by the "background-position" property. Example:

body {background-image:url('http://j-smith-site.blogspot.com/background-image.gif'); background-repeat:no-repeat; background-position:left top;}

As on the above example, the image will cover the background starts from the top left side and covers as large as the size, and it won't repeat. - And as a Css code, there is also a property called Shorthand Property which you can use it to shorten your code. The shorthand property for background is "background". Example:

body {background:#ffffff url('http://j-smith-site.blogspot.com/background-image.gif') no-repeat right top;}

The order of Property value to the above form is starting from background-color, background-image, background-repeat, background-attachment, and then background-position. It does not a matter if one of the property values is missing, as long as they're arranged as is as the order.

All the above properties are belong to Css Properties, and beyond Css Properties, there are also Css3 Properties that which are a little bit greater than Css Properties, or maybe we can say it "additional properties", or something like that. With Css3 properties you'll have some more options to style your background, like be able to place a background image within the content-box, padding-box, or border-box area. Or even using two images on an element or otherwise one image on two elements. The size is specified by pixels or in percentages. Examples:

body {background:url(http://j-smith-site.blogspot.com/background-image.gif); background-size:50px 50px; background-repeat:no-repeat;}

Set two background images for a body element

body {background-image:url(http://j-smith-site.blogspot.com/background-image.gif), url(http://j-smith-site.blogspot.com/background-image.gif);}

Set background image to position on the content box, padding box, or border box area

body {border:1px solid black; padding:20px; background-image:url('http://j-smith-site.blogspot.com/background-image.gif'); background-repeat:no-repeat; background-position:left;}

#content1 {background-origin:border-box;}

#content2 {background-origin:content-box;}

Firefox 3.6 or earlier and some particular versions of Safari may does not support the Css3 properties above, thus you'll have to include the following line on the code in order to they read the code: -moz-background-size for firefox or -webkit-background-origin for Safari. Examples.

Firefox

body {background:url(http://j-smith-site.blogspot.com/background-image.gif); -moz-background-size:50px 50px;
/* Firefox 3.6 */
background-size:50px 50px; background-repeat:no-repeat;}

Safari

body {background:url(http://j-smith-site.blogspot.com/background-image.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box;
/* Safari */
background-origin:content-box;}

Here is a complete example including the Html code

<html>
<head>
<title>Example Background</title>
<style type="text/css">
body {background:#ffffff url(http://j-smith-site.blogspot.com/background-image.gif) no-repeat top left; -moz-background-size:400px 400px;
/* Firefox 3.6 */
background-size:400px 400px;}

#post {background:#eee; width:60%; margin:10px 0px; padding:10px; float:left; color:#333;border:1px solid #ccc; background-origin:border-box;}

#sidebar {background:#888; width:30%; color:#333; margin:10px 0px; padding:10px; float:right; border:1px solid #ccc; background-origin:content-box;}
</style>
</head>

<body>

<div id='post'>

This is the post's background

</div>

<div id='sidebar'>

This is the sidebar's background

</div>

</body>
</html>

To be the lesser the above code will generate the below layout.

This is the post's background

This is the sidebar's background

Maybe that's all..