CSS Backgrounds

Well, you have now seen the syntax of CSS and are now comfortable with writing CSS rules using class and id selectors. Moving on, we now dive into backgrounds in CSS and it's time to ditch the old black and white theme and have beautiful, bright designs.

The background property is one of the most useful ones and really fun to play around with. It is used to manipulate page backgrounds as we shall soon see.

Background Color - background-color

color in CSS world, can be specified in the following three ways:

• using a valid color name, like red
• using an RGB value, like rgb(255, 255, 255)
• or, by using the Hexa code for the color, like #F9F9F9 (There are many websites to check hexa codes for colors, like ColorHexa)

Coming back to background-color, this property sets an element's background color. The default value, transparent allows any underlying content to show through. A value of inherit applies the value of the property from a containing parent element.

background-color: color | transparent | inherit

For example,

h1 { background-color: red; }

p { background-color: orange; }

Live Example →

The above example, will set background color as red for all the h1 headings and background color as orange for all the paragraphs.

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 4+
• Firefox 1+
• Opera 4+
• Safari 1+

Background Image - background-image

As the name suggests, background-image associates an image with an element. The background image requires a URL to the source image specified with the url() syntax. The default value is none.

background-image: url(image-file) | none | inherit

Consider the below example, this will set a background image for the complete webpage.

body { 
    background-image: url(tile.png) 
}

To set background image, for any particular element/tag, use class or id to do so,

#hello { 
    background-image: url(http://www.example.com/images/hello.gif); 
}

Live Example →

The value of url can be a complete web URL or a relative URL. For example, you can simply specify the name of the picture, if it is present in the same directory.

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 4+
• Firefox 1+
• Opera 4+
• Safari 1+

NOTE: One important point to remember while setting backgrounds is, always choose a background that complements the text on it, so that the text is clearly visible.

Repeat Background - background-repeat

Sometimes, it may so happen that the background image that you choose for your webpage may be smaller than the canvas space that is used by other elements on the page. In such a situation, you may want to repeat the image. The values for this property can be following:

• repeat - repeats image both vertically and horizontally. This is the default value for background-repeat property.
• repeat-x - repeats only horizontally
• repeat-y - repeats vertically
• no-repeat - doesn't repeat the background image.

Example:

body{ 
    background-image: url(studytonight.png); 
    background-repeat: no-repeat; 
}

Live Example →

The above code will make the image studytonight.png as the webpage background, but if the size of the image is smaller, it will not completely fill the webpage, and as the background-repeat property is set to no-repeat, hence it won't be repeated, leaving some area with no background.

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 4+
• Firefox 1+
• Opera 4+
• Safari 1+

Background Position - background-position

By default a background image is positioned at the top left corner of the webpage, but we can change that.

This property determines how a background image is positioned. The position of the background image from the top left corner can be specified in terms of absolute distance(in pixels), or it can also be specified as a percentage value.

The named values can also be used while determining the position. The horizontal axis names are center, left and right. The vertical axis, as you might have guessed, top, center and bottom. Consider the following examples:

body { 
    background-image: url(hello.png); 
    background-position: 100px 150px; 
}
body { 
    background-image: url(hello.png); 
    background-position: 10% 55%;
}
body { 
    background-image: url(hello.png); 
    background-position: top center; 
}

Try this by adding background-position: top right; to #study style in the last live example.

When we specify background-position in pixels or percentage, we specify 2 values, first value specifes distance from the left side, and the second value specifies the distance from the top.

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 4+
• Firefox 1+
• Opera 4+
• Safari 1+

Background Behaviour - background-attachment

This property sets, whether the background image will scroll or not. The default value is scroll, which sets the background to scroll with the associated content, typically text. The alternate value, fixed, makes the background static while associated content scrolls over the background.

A value of inherit applies the value of the property from a containing parent element.

background-attachment: scroll | fixed | inherit

Consider the following example,

body{ 
    background-image: url (hello.png); 
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed; }

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 4+
• Firefox 1+
• Opera 4+
• Safari 1+

Note: This property is often used to create a watermark effect similar to the proprietary attribute of the tag, bgproperties, introduced by Microsoft.

Background Properties together

If we want, we can combine all the above background properties in a single property.

The order of the properties should not matter and any property that you don't define use their own default values. Consider the following examples:

body { background: white url(picture.gif) repeat-y center; }