CSS background image tile Technique

Using CSS to Set background images is as simple as the traditional method, but CSS provides more controllable options than traditional control methods. Let's take a look at the most basic method for setting images.

XHTMLCode:

<Div id = "content">
</Div>

CSS code:
# Content {
Border: 1px solid # 000fff;
Height: 500px;
Background-image: URL (images/BG. GIF );
}

The element whose ID is content in the webpage is set to BG in the images folder. as the background, GIF is no different from the settings in the traditional table layout. By default, the background is also tiled in the element. However, it is impossible to use CSS to control the background. In fact, CSS provides us with more attributes for controlling the background, including whether the elements need to be tiled. Improved code:
# Content {
Border: 1px solid # 000fff;
Height: 500px;
Background-image: URL (images/BG. GIF );
Background-repeat: Repeat-X;
}

After the background-repeat: Repeat-X is added, the background is tiled only horizontally on the X axis, but not vertically. This is one of CSS's control over background details. Background-repeat is a property setting for background tile. Optional values include:
Repeat is the default mode, and the background is completely tiled;
No-repeat is not tiled in the X and Y axes;
Repeat-x horizontal tiled background;
Repeat-y.

Tile options are frequently used in web design, such as gradient backgrounds commonly used in Web pages. To create a gradient background in a traditional way, the background with a width of 1 px is usually tiled. However, in order to make the vertical background no longer tiled, the height is usually set to higher than 1000px. If the repeat-X method is used, you only need to design the gradient background based on the desired height and no longer need to use ultra-high image tiles.