This is the 8th day of my participation in the genwen Challenge

When designing a page, designers often add beautiful background images to the page. When the code is implemented, we want the screen to be adaptive but not deformed, and the background image should not scroll with the scroll bar. So how do you do that? Let’s take a look! (The code can be copied directly at the end!)

Background knowledge

Background graphic analysis

Dealing with duplication

background-repeat:no-repeat;
Copy the code

Before processing

Where the width and height are insufficient, the picture is repeatedly covered

After processing

After processing, insufficient width and height of the place will appear blank

Deal with image placement

The vertical level

background-position:center center;
Copy the code

On the left

background-position:top left;
Copy the code

right

background-position:bottom right;
Copy the code

Dealing with image stretching problems (centering as an example)

Transverse tensile

background-size:100% auto;
Copy the code

Longitudinal tensile

 background-size:auto  100%;
Copy the code

Equal scale stretching (will capture images)

The background image is enlarged to fit the element container, the image scale is the same, but some parts are cut to not show the full background image

background-size: cover;
Copy the code

Images stretch (images distort)

Fill the container proportionally and you will see the full background image, but the image will be distorted

background-size: 100% 100%;
Copy the code

Set up a full screen image (code)

Plan 1: the picture proportion is unchanged, but may not display completely

.bg{ position:fixed; top: 0; left: 0; width:100%; height:100%; min-width: 1000px; /* z-index:-10; /* z-index:-10; /* z-index:-10; /* z-index:-10; /* Since the background image should be at the bottom, set a level */ zoom: 1; background: url("img/b8c22095eda02839c25ae158843c6aa1.jpeg") no-repeat center center ; /* background-size:cover; */ background-size:cover; /* -- Enlarge the background image to a size suitable for the element container, the image scale is not the same, but some parts of the background image is not displayed */ background-attachment:fixed; /* When the content height is greater than the image height, the position of the background image is fixed relative to the visual window. This property must be set */}Copy the code

Plan two: the picture fills the container, but the picture may be distorted

.bg{ position:fixed; top: 0; left: 0; width:100%; height:100%; min-width: 1000px; /* z-index:-10; /* z-index:-10; /* z-index:-10; /* z-index:-10; /* Since the background image should be at the bottom, set a level */ zoom: 1; background: url("img/b8c22095eda02839c25ae158843c6aa1.jpeg") no-repeat center center ; /* Background-size :100% 100%; /* Background-size :100%; /* -- fill the container according to the proportion; */ background-attachment:fixed; /* When the content height is greater than the image height, the position of the background image is fixed relative to the visual window. This property must be set */}Copy the code

Xiao Ke love to finish click a “like” and then go! 🤞 🤞 🤞