Home >Web Front-end >HTML Tutorial >Background image stretching (CSS method)_html/css_WEB-ITnose
Background image stretching (CSS method)_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:35:011248browse
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;} 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 src="/static/imghwm/default1.png" data-src="img/bg.jpg" class="lazy" id="background_img" / alt="Background image stretching (CSS method)_html/css_WEB-ITnose" ></body></html>
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%;} 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.