Question

我正在尝试让我的图像下拉，使其不在我的导航栏下方。我希望使用滚动文本修复我的背景图像，但我似乎无法让我的图像具有正确的高度。我尝试更改边距和填充，但似乎没有任何效果。

.wrapper {
  height: 100%;
  line-height: 1.5;
  word-spacing: 4px;
 letter-spacing: 1px;
}

.fixed-bg {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%; 
  width: 100%;
  color: white;
  text-align: center;
  display: table;

 }

.fixed-bg h1 {
  display: table-cell;
  vertical-align: middle;
  color: #993399;
  text-transform: capitalize;
  text-align: center;
  text-shadow: .1rem .1rem .1rem white;
 }

.scroll-bg {
  background-color: white;
  padding: 5px 70px;
  color: #676767;
}



.bg-1 {
  background-image:url(/Images/annual\ dinner1.jpg) ;

}


.bg-2 {
  background-image:url(/Images/donate\ today.jpg) ;
}





@media only screen and (max-device-width: 1366px) {
  .wrapper {
    background-attachment: scroll;
  }
}

Answer 1

package.json

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
  background-image: url("https://images.unsplash.com/photo-1626011338327-2723a5268d7a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80");
  background-color: #cccccc;
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

背景图像被导航栏覆盖

1 个答案: