Use CSS to implement large background web design

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

Frequently made mistakes: background is cut

Looking at the sample file, there is no problem when it is less than 1280 resolution. But if your monitor has a resolution greater than 1280 pixels, you will see the part outside the background image.

A simple solution to the problem: set the color of the edge of the picture to the same color as the background of the web page. Here I use Web Designer Wall as an example, look at the picture below, and note that the edges of the picture are solid colors.

CSS part

This part is simple, set the background image for the body element (located in the center, top)

Here is the css code:

Pay attention to the fact that there are two extra lines in the body selector, so that the background image changes when the browser window is smaller than the content width, which will appear in firefox.