CSS Web Design examples: design and make large background pages

Web page Production WEBJX article introduction: how to use CSS to achieve a large background page design.

Since I published a large background page design collection, I received a lot of emails asking how to use CSS to achieve a large background of the Web page design. So I decided to share with you the design techniques of the big background site. In this tutorial, I'll use some examples to illustrate how to design a large background site with one or two pictures.

Mistakes that are often made: backgrounds are cut (see sample)

Look at the sample file, which is no problem when the resolution is less than 1280. But if your display has a resolution greater than 1280 pixels, you will see a portion of the background image.

Example 1: A picture (see sample)

Simple way to fix the problem: set the color of the edge of the picture to the same color as the background of the page. Here I use the web Designer wall as an example, look at the picture below, note that the edge of the picture is solid color.

CSS Section

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

Here is the CSS code:

Body { padding:0; margin:0; Background: #f8f7e5 URL (wdw-bg.jpg) no-repeat Center top; width:100%; display:table; }

Notice that there are two extra lines in the body selector to prevent the background image from changing when the browser window is smaller than the content width. (this will appear in Firefox)

[1] [2] Next page