Use CSS to realize large background web design

Author：Eve Cole Update Time：2009-06-12 17:52:52

Since the author released the large background web design collection, I have received a lot of emails asking how to use CSS to achieve large background web design. Therefore, I decided to share with you the design skills of large background websites. In this tutorial, I will use some examples to illustrate how to use one or two pictures to achieve the design of a large background website.

Common mistakes: The background is cropped.

When viewing the sample file, there is no problem when the resolution is smaller than 1280. But if your monitor has a resolution greater than 1280 pixels, you will see parts other than the background image.

Simple solution to the problem: set the edge color of the image to the same color as the background color of the web page. Here I use Web Designer Wall as an example. Look at the picture below. Note that the edges of the picture are solid colors.

CSS part

This part is very simple, set the background image for the body element (positioned at center, top)

The following is the css code:

body {
padding: 0;
margin: 0;
background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
width: 100%;
display: table;
}

Note that there are two extra lines within the body selector. This is to prevent the background image from changing when the browser window is smaller than the content width, which will occur in Firefox.