In the last tutorial we discussed the basics and syntax of CSS, where to write the files and how to apply them to our pages. In this brilliant article, we will go over how to apply styles to backgrounds and text. So let's get busy.
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.