时间戳

首页 > 解决方案 > 背景图像被导航栏覆盖

css - 背景图像被导航栏覆盖

问题描述

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

.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;
  }
}

标签： cssimage

解决方案

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;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">hello</h1>
    <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos, harum?</h3>
    <button>Submit</button>
  </div>
</div>


</body>
</html>

推荐阅读