The code for using an image as a background is: background-image: url(image.gif);, remember to change the location to include the image you will be using, E.G url(images/image.gif);
Attributes, values and explanations
background-repeat:
Can be any of the following: repeat-x / repeat-y / repeat / no-repeat.
repeat-x means that the image will only be repeated across the page (horizontal),
repeat-y means that the image will only be repeated down the page (vertical),
repeat means that the image is repeated both horizontally and vertically,
no-repeat means that the image is only shown once
background-position:
Can be any of the following: top / center / bottom / left / right.
Background-position can also be a percentage or an amount of pixels across or down the page, or even both.
background-attachment
Can be either scroll or fixed. What this means is that when you have a page that has a scrollbar on it, having background-attachment: fixed; means that the image will follow the user down the page and stay exactly where you want it to be. It will look more like the content is moving but the image is not. Having background-attachment: scroll; means that the image will stay where you put it and if you scroll down the image will look like part of your page and once you scroll down you will no longer see the image, confusing to explain but once you see for yourselves you will understand.
<html>
<head>
<title>More CSS Background Tips</title>
<style type="text/css">
body {
background-image: url(images/image.gif);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
|
Now you can see from the example above I have created that we want the background image called 'image.gif' to be displayed in the center of the screen, the image will only be shown once (no-repeat) and if there are scrollbars are present on the page when you scroll down the image will continue to remain at the top of the page.