Question

我正在尝试设置我的网页，因此它在顶部有一个大的响应图片，滚动页面而不是保持固定。

我正在做的事情的一个确切例子是：http://teamtreehouse.com/

这是我尝试重新创建它的尝试。请帮忙!!

<!DOCTYPE html>
<head>
    <style>
        html {
            background: url(https://www.pathful.com/static/images/header/header-bg-home.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
</head>
<body>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

</body>

</html>

Answer 1

这是你想要实现的吗？：

<head>
    <style>

body, html {
      padding:0;
      margin:0;
}

.header { 
  background: url(https://www.pathful.com/static/images/header/header-bg-home.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width:100%;
  min-height:450px;
}

    </style>
</head>
<body>
<div class="header"></div>
<h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>
<br>
<br>
<br>
<h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>
<br>
<br>
<br>
<h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>
<br>
<br>
<br>
<h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>
<br>
<br>
<br>
<h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>
<br>
<br>
</div>

http://codepen.io/anon/pen/bGglA

将背景附加到html标签是错误。

Answer 2

您已将其附件设置为固定。只需删除它。

更改

background: url(https://www.pathful.com/static/images/header/header-bg-home.jpg) no-repeat center center fixed;

要

background: url(https://www.pathful.com/static/images/header/header-bg-home.jpg) no-repeat center center;

Answer 3

您的问题是＆＃34;已修复＆＃34;属性在以下CSS行中：

background: url(https://www.pathful.com/....jpg) no-repeat center center fixed;

要让图像随页面滚动，只需将其删除：

background: url(https://www.pathful.com/....jpg) no-repeat center center;

要了解详情，请查看：http://www.w3schools.com/cssref/pr_background-attachment.asp

我无法获得这个响应的背景图片滚动页面

3 个答案: