Question

我正在构建一个简单的目标网页，访问者可以在其中看到横幅，下方的背景图片以及垂直位于彼此下方的几个按钮。

我遇到的问题是，目前，横幅和背景图像都是从相同的位置（网页的左上角）开始的，因此横幅隐藏了部分背景。

我目前的代码是：

<style>
  body {
    background: url("http://url.to/background") no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    padding: 0px;
    margin: 0px;
  }

  #Wrap {
    position: absolute;
  }
</style>

<body>
  <div id="Wrap">
    <img src="http://url.to/banner" />
  </div>
</body>

预期的结果是让横幅图像在适合屏幕的同时占据页面的开头，而不会出现任何额外的滚动。更重要的是让背景在横幅后面开始。

可以在以下网址找到小提琴：

https://jsfiddle.net/morL1zka/

任何帮助或想法都将不胜感激。

Answer 1

你应该使用background-position-y，你需要设置一个等于横幅高度的值

body {
  background: url("https://www.w3schools.com/css/img_fjords.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 0px;
  margin: 0px; 
  background-position-y: 100px;/*the value must be the same height as the banner */
  
}

#Wrap {

  position: absolute;
}

<div id="Wrap">
  <img src="http://url.to/banner" />
</div>

Answer 2

您可以使用JavaScript解决此问题。 Backgroundposition将自动设置在横幅下，而不知道它的高度。

var body = document.getElementById('body-margin');
var banner = document.getElementById('banner');

body.style.backgroundPositionY = banner.offsetHeight + 'px';

body {
  background: url("http://simonakoleva.me/wp-content/themes/hitchcock/images/bg.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0px;
  padding: 0px;
}

#Wrap {
  background-color: #345370;
  text-align:center;
}

<body id="body-margin">
  <div id="Wrap">
    <img id="banner" src="http://simonakoleva.me/wp-content/uploads/2017/05/mybanner.jpg" />
  </div>
</body>

以下是您的更新小提琴：https://jsfiddle.net/morL1zka/2/

HTML和CSS - 横幅和背景定位

2 个答案: