Background image stretching (CSS method)_html/css

Background image stretching (CSS method)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:35:01

Original

1150 people have browsed it

When laying out the current website homepage, I discovered a problem. I used a 1440*900 png image as the background image. The Div in the page uses more percentage adaptive frame sizes. The CSS of the original body element is as follows

html {    width: 100%;    height: 100%;}body {    background: url(../img/bg.png) no-repeat;    margin: 0;    padding: 0;    width: 100%;    height: 100%;    overflow: auto;}

Copy after login

The background image is a gradient image. If the image is repeatedly tiled It will be very ugly, so we don’t do tile processing.

After this is completed, there is no problem on a monitor with a resolution of no more than 1440*900. However, when viewed on a monitor with a higher resolution, it is found that the frame stretches with the size of the browser. However, when the background image exceeds 1440*900, the gap will be filled with a white background, which is very ugly.

Later, I searched for processing methods and found some that were processed with js (because I am still learning Js, I did not use it), and some were processed with CSS under certain compatibility conditions.

So, use the following method to re-create the background.

HTML code:

<!DOCTYPE html><html><head>    <meta charset="utf-8" /></head><body>    <img id="background_img" src="img/bg.jpg" /></body></html>

Copy after login

CSS code:

html {    width: 100%;    height: 100%;}body {    /*background: url(../img/bg.png) no-repeat;*/    margin: 0;    padding: 0;    width: 100%;    height: 100%;    overflow: auto;}/* ------------ Background Img ------------------*/#background_img {    z-index: -999;    position: fixed;    left: 0;    top: 0;    width: 100%;    height: 100%;}

Copy after login

After completion, the background image (actually turned into a pseudo background, an img on the page) will be stretched according to the size of the browser.

Problems with this method:

① When a jpg image is stretched to a certain extent, the quality loss will be very serious.

　②When you right-click the mouse in a blank area, save the picture is displayed instead of the regular right-click menu.