CSS background_html/css_WEB-ITnose

First of all, it should be noted that the background attributes of all elements will not be inherited, but their background color will default to transparent

1. Background color

{background -color: gray; padding: 20px;}

2. Background image

a.radio {background-image: url(/i/eg_bg_07.gif); }

3. Background repeat

If you need to tile the background image on the page, you can use the background-repeat attribute.

The repeat attribute value causes the image to be tiled both horizontally and vertically, as is common with background images. repeat-x and repeat-y cause the image to be repeated only in the horizontal or vertical direction respectively, while no-repeat does not allow the image to be tiled in any direction.

By default, the background image will start from the top left corner of an element. Please see the following example:

body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; }

4 , Background positioning

You can use the background-position attribute to change the position of the image in the background.

The following example centers a background image within the body element:

body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no- repeat; background-position:center; }

There are many ways to provide a value for the background-position property. First, you can use some keywords: top, bottom, left, right and center. Typically, these keywords will appear in pairs, but that's not always the case. You can also use length values ​​such as 100px or 5cm, and finally you can use percentage values. Different types of values ​​have slightly different placement of the background image.

5. Background association

If the document is long, when the document scrolls down, the background image will also scroll with it. When the document is scrolled beyond the image, the image disappears.

You can prevent this scrolling via the background-attachment attribute. Through this attribute, you can declare that the image is fixed relative to the visual area, so it will not be affected by scrolling:

body { background-image:url(/i/eg_bg_02.gif); background -repeat:no-repeat; background-attachment:fixed }