Coding Page Backgrounds in CSS for beginners

Published: May 21, 2009Posted in: Techy StuffTags: , , , ,
Coding Page Backgrounds in CSS for beginners

Background images can add a lot to the visual impact of a webpage. In this post I will demonstrate using CSS how to:

Positioning a Background Image

This snippet of CSS will place a background image at the top left of the browser screen:
#body {
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');
background-position: left top;
}

The first term after background image specifies the x-axis position, and the second the y-axis. Using simple english, you can specify the position as follows:
background-position: left top;
background-position: right bottom;
background-position: center center;

or you can specify position in pixels: background-position: 75px 25px;

or a percentage of the display size of the browser: background-position: 30% 40%;

Repeat a Background Image

To repeat or tile a background image use the following code:  
#body {
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');
background-repeat: repeat;
}

You can also repeat along the x-axis only using repeat-x, or along the y axiz only using repeat-y

Show a background image once only

We use the code background-repeat: no-repeat; to specify that the background image should only be used once:
#body {
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');
background-repeat: no-repeat;
}

Fix a Background Image

So that the background image does not move when the page is scrolled, we use background-attachment:fixed;:

#body {
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');
background-attachment:fixed;
}

Combining the above

We can of course combine various attributes to one image, for example:
#body {
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');
background-repeat: no-repeat;
background-attachment:fixed;
background-position:left bottom;
}

Note re embedded CSS vs Stylesheets

I have assumed that you are embedding CSS in a style sheet rather than embedding CSS in your web-page.

Download this article as PDF