![[Add to Favorites]](/image/icon/fav.gif){kind=icon}
![[Set As Homepage]](/image/icon/home.gif){kind=icon}
![[Contact]](/image/icon/mail.gif){kind=icon}
![[Syndicate this Site]](/image/icon/cdf.gif){kind=icon}
This tutorial will explain how to set backgrounds on web pages using (X)HTML or CSS. You should have at least a very basic understanding of how to read source code and understand HTML and CSS syntax to follow along with this tutorial.
Before CSS came out for 4.0 versions of popular browsers, a background property existed for HTML. I don't recommend this method because the designer has very little control over positioning of the background image. Any webpage still using such code can be considered years out of date.
Background Color HTML Method:
In your HTML Document find the opening <body> tag and change it to the following:
<body bgcolor="blue">
This is a very simple method for setting the background color for the whole page to blue. You can use color names or hexidecimal color code to define the desired color. Some browsers such as Internet Explorer 5 for Macintosh apparently have trouble rendering color names, and there are advantages to using hexidecimal code for colors, such as a range of over 16 million colors.
<body bgcolor="#0000FF">
To define an image as the body's background add the following to your opening <body> tag:
<body background="images/dog.gif">
This assumes that there is a folder called images in the directory of your webpage, and the images folder has a file in it called dog.gif. Make sure you get the path to your image correct. A slash before images, resulting in the code /images/dog.gif means that the images folder is in your root directory.
Keep in mind you can use both bgcolor and background to specify both background color and background image.
You can also use a full URL to define your background image, but this uses extra resources.
<body background="http://example-website.com/images/dog.gif">
You will notice that setting a background image in the HTML method will always tile your image both horizontally and vertically starting from the top left.
This is where CSS comes in to give you more control. Now delete all the changes you made, so the following ones can take effect.
In CSS you can define a background's color, image, image position, image horizontal tiling or image vertical tiling. This seems like a lot, but let us look at one at a time, and then combine them all at the end.
First, decide on the tag (or class) you wish to define the backgroud for. You can either define this in your CSS document, or add it directly onto that tag. I suggest using a seperate CSS document, but if you are very new to CSS, you can just use style in your tags to add CSS attributes.
In your CSS Document.
body {
background-color: #0000FF;
}
Alternatively, use CSS in the HTML document.
<body style="background-color: #0000FF;">
I actually prefer hexidecimal color code.
In your CSS Document.
body {
background-color: #0000FF;
background-image: url(images/dog.gif);
}
Alternatively, use CSS in the HTML document.
<body style="background-color: #0000FF; background-image: url(images/dog.gif);">
Notice that the format for image has changed. Type url and then follow with an address in round brackets.
In your CSS Document.
body {
background-color: #0000FF;
background-image: url(images/dog.gif);
background-position: top center;
}
Alternatively, use CSS in the HTML document.
<body style="background-color: #0000FF; background-image: url(images/dog.gif); background-position: top center;">
For background-position there are two words to define. You define vertical and horizontal positioning in that order. For vertical you can choose top, center or bottom, and for horizontal you can choose left, center or right.
You still are not limited to these choices for background position. You can be pixel perfect by specifying the position in pixels (px) or even negative pixel positions.
background-position: 0px 0px;
is top left.
background-position: 150px 300px;
is 150 pixels down the page and 300 pixels to the right.
Finally, another positioning value is percentage values - from 0% to 100% for both vertical and horizontal. 50% defines the center.
Now, the last thing to specify for your background is tiling, which is called background-repeat.
There are four choices for this.
background-repeat: no-repeat;
The background image will be shown once.
background-repeat: repeat-x;
The background image will tile from left to right, but starting at where you specified as your background position.
background-repeat: repeat-y;
The background image will tile from top to bottom, but starting at where you specified as your background position.
background-repeat: repeat;
The background will tile both left to right and top to bottom starting at your background position.
Adding Background image repeat
In your CSS Document.
body {
background-color: #0000FF;
background-image: url(images/dog.gif);
background-position: top center;
background-repeat: repeat-x;
}
Background attachment is mainly a property for the body tag or divisions large enough to have a scroll bar. By default, your document's body background image will scroll with the page. The default background-attachment value is scroll. You can experiment between the values scroll and fixed for your desired effect.
In your CSS Document.
body {
background-color: #0000FF;
background-image: url(images/dog.gif);
background-position: top center;
background-repeat: repeat-x;
background-attachment: fixed;
}
One great thing about CSS is that you can use CSS shorthand to specify all these background properties on one line instead of four. You can use the background CSS shorthand.
body {
background: #0000FF url(images/dog.gif) top center repeat-x fixed;
}
Can you specify more than one background?
Don't be discouraged when I tell you that you cannot define more than one background. At least not until CSS 3 is ready. You can still simulate multiple backgrounds by dividing the body or any other section of the webpage into multiple sections using <div> tag pairs.
<body>
<div class="sec1"></div>
<div class="sec2"></div>
</body>
Using CSS positioning you can position these sections in any way, and also define a seperate background for each one.
div.sec1 {
background: #0000FF url(images/dog.gif) top center repeat-x fixed;
}
div.sec2 {
background: #FF0000;
}
March 30, 2005
Last updated: April 1, 2005
* The US spelling of the word colour is used throughout the article so that the reader does not mistype his or her code that uses US spelling as a standard.
© MCMXCVI - MMV Albino Blacksheep
Design and Content Copyright © 2001-2005, Albino Blacksheep (including all its individual members), except where specified otherwise
Statistics © 1998-2005 eXTReMe digital
FastCounter by bCentral © 2005 Microsoft Corporation
Privacy Policy