Background

Setting the CSS Background property of an HTML is easy! It provides one of the greatest changes you can do in styling with the least time required. With only 5 properties, this will be a relatively simple tutorial.

Styling the Background

Common Properties:

• background-color – sets the background color
• background-image – links to an image and displays it in the background
• background-repeat – for HTML elements larger than the background, it determines which way to tile repeat the image
• background-position – sets the background position

<style type=”text/css”>
div.special
{

background-color:#090;
background-image: url(‘/images/smiley3.gif’);
background-repeat: repeat-x;
background-position: left bottom;
}
</style> 
<div class=”special”>

line 1 
<br/> 
line 2
</div>

We have a div with the class of special that has a few line breaks and some text to make it taller. In our CSS, we use background-color set to “#090” (Green) that will be the color of the special div’s background. Next, we set the background-image to a URL that is a reference of “images/smiley3.gif”. The background image needs the url(”) where your link will go in between the single quotes. Quick note here, it might seem like a conflict of interest to set a background color and a background image, but the background color is more of a fallback for what the background image doesn’t cover.

The background-repeat property by default is declared as “repeat”, which commands the browser to repeat the image horizontally and vertically. You must override that property if you expect anything different, just like how we only wanted horizontal repeating, hence the background-repeat set to “repeat-x”. Last and close to least, is the background-position property. Normally, you would not use this with a repeating background image, but I have done so for illustrative purposes. You can utilize this property to position the background wherever you would like, but recognize that it is only useful if the image is smaller than the HTML element.

References

• CSS Background Properties (SitePoint)
• Color and Backgrounds (w3)
• CSS Background Tutorial (CSSBasics)
• CSS Background Properties (HTMLGoodies)