The method of CSS implementation background not scrolling with the browser

web front end eleven thousand seven hundred and twenty 12 years ago (2012-07-18)

In memory, we have seen many blogs micro-blog In QQ space and QQ space, many people set a fixed background for their nests browser Scroll. In addition to javascript, CSS can also be easily implemented.

The background code that does not scroll with the browser is as follows:

CSS code
  1. body {  background : url (Address of background picture) no-repeat   fixed   center   top ;   margin :0;   padding :0;  }  

Only one core code is needed to implement the background without scrolling with the browser, which is compatible IE6 +The core code of the browser is: background attachment: fixed;

No matter how the scroll bar is dragged, the background image is always firmly fixed on the page.

At present, most people are using widescreen browsers, so it is better to set the background in 1920 * 1080. Whether it is microblog or QQ space, users focus on the middle articles, and choose the background theme The picture is biased to both sides, making it obvious, which can play the role of finishing touch.

If you can't solve the problem that the IE6 background doesn't scroll with the browser by other methods, try the CSS code above, or use the JS below.

IE6 browser implementation background does not scroll with the browser code:

JavaScript code
  1. <script type= "text/javascript" > var  scrollBackground =  true ;</ script>