固定背景图片位置的div容器

Question

I want to create a page like this: Page 我想创建这样的页面：页

I dont want to place the image as background. 我不想将图像放置为背景。 I want to create a div container and this div container have a background-image. 我想创建一个div容器，此div容器具有背景图像。 And under this div should be aa other div. 在这个div下应该是另一个div。 And if i scroll the div under the div with the background-image should go over the div with the background-image. 如果我滚动带有背景图像的div下的div，则应该越过带有背景图像的div。 I have something but it's crap. 我有东西，但是很烂。 Here my Page: 1 这是我的页面： 1

Here is the Code: 这是代码：

*{
    font-family: "Open Sans";
    margin: 0px;
    padding: 0px;
    font-size: 18px;
}
html {
    height: 100%;
}
body{
    height: 100%;
    background-image: url('http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png') !important;
    background-repeat: no-repeat !important;
    background-position: 50% 0 !important;
    background-size: auto !important;
    background-color: transparent !important;
    background: inherit;
}

nav{
   background: url("images/line-header.png") repeat-x scroll center bottom #4A525A;
   padding: 15px;
   position: fixed;
   top: 0px;
   width: 100%;
}

nav > ul{
    margin: 0px;
    padding: 0px;
    text-align: center;
}

nav ul > li{
    margin-left: 25px;
    display: inline-block;
    list-style-type: none;
}

nav ul li > a{
    display: block;
    text-decoration: none;
    color: black;
    color: #697683;
    transition: color 0.5s;
}

nav ul li > a:hover{
    color: #FFF;
}

.content{
    height: 1000px;
    margin-top: 500px;
    background-color: orange;
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="index.css" >
        <!-- Open Sans -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    </head>
    <body>

            <nav>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                </ul>
            </nav>

            <div class="content">
                <h1></h1>
            </div>

    </body>
</html>

Answer 1

Just add another div and set the background-attachment as fixed 只需添加另一个div并将background-attachment设置为fixed

.background{
  background: url('http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png') no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 500px; <------can make 500px instead of using margin-top: 500px on .content
}


.content{
  height: 1000px;
  background-color: orange;
  /*margin-top: 500px;*/ <-------------take out
}

FIDDLE 小提琴

Answer 2

You might try this, add a image height of 700px and background-attachment: fixed; 您可以尝试此操作，添加700px的图像高度和background-attachment：固定；

*{
    font-family: "Open Sans";
    margin: 0px;
    padding: 0px;
    font-size: 18px;
}
html {
    height: 100%;
}
body{
    height: 700px;
    background-image:url('http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-        images/748028443.png') !important;
    background-repeat: no-repeat !important;
    background-position: 50% 0 !important;
    background-size: auto !important;
    background-color: transparent !important;
    background-attachment: fixed;
}

nav{
   background: url("images/line-header.png") repeat-x scroll center bottom #4A525A;
   padding: 15px;
   position: fixed;
   top: 0px;
   width: 100%;
}

nav > ul{
    margin: 0px;
    padding: 0px;
    text-align: center;
}

nav ul > li{
    margin-left: 25px;
    display: inline-block;
    list-style-type: none;
}

nav ul li > a{
    display: block;
    text-decoration: none;
    color: black;
    color: #697683;
    transition: color 0.5s;
}

nav ul li > a:hover{
    color: #FFF;
}

.content{
    height: 1000px;
    margin-top: 500px;
    background-color: orange;
}


<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="index.css" >
        <!-- Open Sans -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    </head>
    <body>

            <nav>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                </ul>
            </nav>

            <div class="content">
                <h1></h1>
            </div>

    </body>
</html>

固定背景图片位置的div容器

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-01-01 17:41:18

解决方案2
1 2015-01-01 19:12:29

固定背景图片位置的div容器

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-01-01 17:41:18

解决方案2 1 2015-01-01 19:12:29

解决方案1
1 已采纳 2015-01-01 17:41:18

解决方案2
1 2015-01-01 19:12:29