More on Backgrounds in CSS
The property 'background-image'
The CSS property background-image is used to set a background picture. As an example of a background image, we use the butterfly. You can, of course, use any other image that you like. To use the picture with the butterfly as a background image on your website you need to simply add to the <body> the background-image property and assign the location of the image.
body (
background-color: # FFCC66;
background-image: url ( "butterfly.gif");
)
h1 (
color: # 990000;
background-color: # FC9804;
)
Repetition of the background image: the property 'background-repeat'
Have you noticed in the above example, that by default the butterfly, repeated both horizontally and vertically until the entire screen is covered? The background-repeat property controls this behavior.
background-repeat: repeat-x The image is repeated horizontally
background-repeat: repeat-y The image is repeated vertically
background-repeat: repeat The image is repeated both horizontally and vertically
background-repeat: no-repeat The image is not repeated
For example, in order to prevent the repetition of a background image our code should look like:
body (
background-color: # FFCC66;
background-image: url ( "butterfly.gif");
background-repeat: no-repeat;
)
h1 (
color: # 990000;
background-color: # FC9804;
)