Fixed Background Image

问题

I am curious to know how to create a background image in a div that is fixed. When you scroll down (or up) the image stays but the content flows over the div. Here is a site that does what I am trying to explain, to give you a better idea on what I am trying to describe. jWebMedia I've always thought sites like this were really attractive and wanted to know how to develop it. If you know of any good articles that cover this, that would be great.

Thanks for all your help!

回答1:

background:url('http://yoururl');    
background-size: cover;
background-attachment: fixed;

回答2:

Fixed positioned elements

fixed The element is positioned relative to the browser window

/*only for this sample*/
body{
  margin:0;
}
div{
  width:100%;
  height:1000px;
  background:green;
}
nav{
  position:fixed;
  top:0;
  width:100%;
  height:40px;
  background:grey;
}

<div>
<nav></nav>
</div>

CSS background-attachment Property

fixed The background is fixed with regard to the viewport

/*only for this sample*/
body{
  margin:0;
}

.fixed{
  width:100%;
  height:2000px;
  background-image:url(http://assets3.whicdn.com/assets/registration/reg_wall/Header-Find-your-inspiration.jpg);
  background-size:cover;
  background-attachment:fixed;
}
.scroll{
  position:absolute;
  width:50px;
  height:50px;
  margin:20px;
  background:orange;
}

<div class="fixed">
  <div class="scroll"></div>
</div>

回答3:

These are literally just what you said already in the question title – fixed background images.

background-attachment:fixed fixes the background image in regard to the viewport – and so when you scroll an element that has such a background image in and out of the viewport, that generates this effect, simple as that.

来源：https://stackoverflow.com/questions/28550568/fixed-background-image

标签

html

css

background-image

fixed