How to use CSS to achieve large background page effect

In the design of Web pages, you often encounter the problem: When using a picture background, because the display resolution is too large or the picture size is too small, on either side of the page or the lower part of the background picture. For example: There is no problem when the resolution is less than 1024*768. But if your monitor has a resolution greater than 1024*768, you will see a part of the background image that affects the effect. The following figure:

How to use CSS to achieve a large background of the Web page effect, below to see some examples:

Example 1: Picture + background Color

Sets the color of the edge of the picture to the same color as the background color of the page. Look at the picture below, note that the edge of the picture is solid color.

This section is simple, set the background image for the BODY element (located in Center,top)

Here is the CSS code:

CSS code copy content to clipboard

The code is as follows:

Body {

padding:0;

margin:0;

Background: #f8f7e5 URL (wdw-bg.jpg) no-repeat Center top;

width:100%;

display:table;

}

Example 2: Two pictures

A repeating soft plank pattern is applied to the body tag, and a centered background pattern is applied to the wrapper label.

The trick here is to use a similar but darker color for the GIF image as the cork background.