CSS: Backgrounds - Working with Background Images
(Page 3 of 5 )
There are a lot of issues to consider when you work with images, such as image size, position, does it scroll or stay in one spot, and so forth. But first let's insert a basic image in a paragraph:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('2.png')
}
</style>
</head>
<body>
</body>
</html>
This will take the file 2.png and set it as the background of your body. If your image is the wrong size, you will notice that your browser tiles the image over and over again. To stop this, you can use the background-repeat property.
Repeating and Not Repeating the Background
To make sure the background does not tile, use the background-repeat:no-repeat property, like so:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('2.png'); background-repeat:no-repeat
}
</style>
</head>
<body>
</body>
</html>
Or if you wanted it to repeat, you could do this:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('2.png'); background-repeat:repeat
}
</style>
</head>
<body>
</body>
</html>
You can also make the background repeat horizontally or vertically using either the repeat-x (horizontal) or the repeat-y (vertical) values.
Next: Positioning the Background Image >>
More Style Sheets Articles
More By James Payne
