How to design a large background web page with CSS

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)

Example 2: Two pictures (see sample)

I'm going to use the design Jobs on the wall as an example, I've applied a duplicate soft plank pattern to the body tag, and then applied a centered background pattern to the wrapper tag.

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

Example 3: Sky background (see sample)

In this example, I applied a 1 pixel horizontal gradient to the body tag. Then I added a centered cloud background picture to the wrapper tag.

Update: Apply a Sky background picture to an HTML selector (see sample)

Thanks to the reader's comments, the following is a more concise way to apply a gradient background to the HTML selector, so the wrapper tag is no longer needed.

SOURCE Link: how To:css Large Background