2023年5月30日 05:49:23go评论59阅读模式

英文:

Trying to add background image in html and css behind the nav bar so space doesn't show when scrolling

问题

你可以尝试在CSS中的.navbar和.footer样式中添加以下属性来移除顶部和底部的空白空间：

.navbar {
  margin-top: 0;
  margin-bottom: 0;
}

.footer {
  margin-top: 0;
  margin-bottom: 0;
}

这将移除导航栏和页脚的上下外边距，从而减少滚动时的空白空间。希望这对你有所帮助！

英文:

I can't figure out how to make the background image in my html and css to fill under the navbar and footer. When I scroll the space of the navbar is just a white space, I want it to scroll without space at the top and bottom. Thanks!

* {
  box-sizing: border-box;
}
  body, html {
  margin: 0 auto;
  padding: 0;
}

.background-container {
  background-image: url(&quot;http://placekitten.com/g/500/500&quot;);
  background-size: cover;
  background-position: center;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
  background-repeat: no-repeat;
}


.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30%; /* Adjust the height as needed */
}

.logo-container img{
  max-width: auto;
  max-height: 600px;
  text-align: center;


}

@media screen and (max-width: 768px) {
  /* Adjust background image for mobile devices */
  .background-container {
    background-position: center;
    height: auto;
  }
}

.footer {
  padding: 25px 0;
  background-color: #f2f2f2;
  bottom: 0;
  width: 100%;
}
.navbar {
  margin-bottom: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: auto;
}


@media (max-width: 768px) {
  .logo-container {
    margin-top: 50px;
  }


  .footer {
    position: relative;
  }
  .navbar {
      position: relative;
}

&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;

&lt;nav class=&quot;navbar navbar-expand-sm navbar-light bg-light&quot;&gt;
  &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;The Backyard&lt;/a&gt;
  &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
    &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
    &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
      &lt;li class=&quot;nav-item active&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#home&quot;&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#about&quot;&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#events&quot;&gt;Events&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/nav&gt;

&lt;div class=&quot;background-container&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;logo-container&quot;&gt;
    &lt;img src=&quot;http://placekitten.com/g/100/100&quot; alt=&quot;Logo&quot;&gt;
    &lt;/div&gt;

&lt;footer class=&quot;footer&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;p&gt;The Backyard&lt;br&gt;
      at Boca Fiesta &amp; Palomino&lt;br&gt;
      232 1/2 SE 1st st.&lt;br&gt;
      Gainesville, FL 32601&lt;/p&gt;
  &lt;/div&gt;
&lt;/footer&gt;

I've tried to change the code on both css and html but nothing seems to be changing the result.

答案1

得分: 0

我不确定为什么您创建了一个新元素来放置背景图像，而不是直接放在<body>标签上，但您的问题是因为在小屏幕尺寸上，您在.background-container元素上设置了height:auto。

您已经创建了一个元素，将其固定位置并使其高度和宽度都为100%。当屏幕尺寸较小时，您设置height:auto，现在该元素的高度为0px，因为里面没有任何内容。

此外，您同时引入了Bootstrap 4的CSS和Bootstrap 3的JS - 这毫无意义。请选择其中一个版本，不能混用这两个版本！

英文:

I'm not sure why you have created a new element that you are putting the BG image on instead of just putting it on the <body> tag, but your problem is because at small screen sizes you are setting height:auto on the .background-container element.

You have created an element, made it fixed position and then made it 100% tall, 100% wide. When the screen size is small and you set height:auto now that element has a height of 0px since there's nothing inside that element.

* {
  box-sizing: border-box;
}
  body, html {
  margin: 0 auto;
  padding: 0;
}

.background-container {
  background-image: url(&quot;http://placekitten.com/g/500/500&quot;);
  background-size: cover;
  background-position: center;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
  background-repeat: no-repeat;
}


.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30%; /* Adjust the height as needed */
}

.logo-container img{
  max-width: auto;
  max-height: 600px;
  text-align: center;


}

@media screen and (max-width: 768px) {
  /* Adjust background image for mobile devices */
  .background-container {
    background-position: center;
    /*height: auto;*/    /* &lt;=======  REMOVE THIS */
  }
}

.footer {
  padding: 25px 0;
  background-color: #f2f2f2;
  bottom: 0;
  width: 100%;
}
.navbar {
  margin-bottom: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: auto;
}


@media (max-width: 768px) {
  .logo-container {
    margin-top: 50px;
  }


  .footer {
    position: relative;
  }
  .navbar {
      position: relative;
}

&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;

&lt;nav class=&quot;navbar navbar-expand-sm navbar-light bg-light&quot;&gt;
  &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;The Backyard&lt;/a&gt;
  &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
    &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
    &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
      &lt;li class=&quot;nav-item active&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#home&quot;&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#about&quot;&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#events&quot;&gt;Events&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/nav&gt;

&lt;div class=&quot;background-container&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;logo-container&quot;&gt;
    &lt;img src=&quot;http://placekitten.com/g/100/100&quot; alt=&quot;Logo&quot;&gt;
    &lt;/div&gt;

&lt;footer class=&quot;footer&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;p&gt;The Backyard&lt;br&gt;
      at Boca Fiesta &amp; Palomino&lt;br&gt;
      232 1/2 SE 1st st.&lt;br&gt;
      Gainesville, FL 32601&lt;/p&gt;
  &lt;/div&gt;
&lt;/footer&gt;

Also you are including Bootstrap 4 CSS and Bootstrap 3 JS - this makes no sense at all. Pick one of the other, you can't mix versions like this!

答案2

得分: 0

我建议在您的问题评论中将背景图应用于body，但我想不出如何以这种方式应用不透明度。所以，只需将<div class="background-container"></div>移到页面顶部。

* {
  box-sizing: border-box;
}

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

.background-container {
  background-image: url("http://placekitten.com/g/500/500");
  background-size: cover;
  background-position: center;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
  background-repeat: no-repeat;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30%; /* 根据需要调整高度 */
}

.logo-container img {
  max-width: auto;
  max-height: 600px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  /* 调整移动设备的背景图像 */
  .background-container {
    background-position: center;
    height: auto;
  }
}

.footer {
  padding: 25px 0;
  background-color: #f2f2f2;
  bottom: 0;
  width: 100%;
}

.navbar {
  margin-bottom: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: auto;
}

@media (max-width: 768px) {
  .logo-container {
    margin-top: 50px;
  }

  .footer {
    position: relative;
  }

  .navbar {
    position: relative;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="background-container"></div>

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">The Backyard</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#events">Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="logo-container">
  <img src="http://placekitten.com/g/100/100" alt="Logo">
</div>

<footer class="footer">
  <div class="container">
    <p>The Backyard<br>
      at Boca Fiesta & Palomino<br>
      232 1/2 SE 1st st.<br>
      Gainesville, FL 32601</p>
  </div>
</footer>

英文:

I suggested in a comment on your question to apply the background image to body, but I can't think of how you would apply opacity in that manner. So, just move <div class="background-container"></div> to the top of the page.

* {
  box-sizing: border-box;
}
  body, html {
  margin: 0 auto;
  padding: 0;
}

.background-container {
  background-image: url(&quot;http://placekitten.com/g/500/500&quot;);
  background-size: cover;
  background-position: center;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
  background-repeat: no-repeat;
}


.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30%; /* Adjust the height as needed */
}

.logo-container img{
  max-width: auto;
  max-height: 600px;
  text-align: center;


}

@media screen and (max-width: 768px) {
  /* Adjust background image for mobile devices */
  .background-container {
    background-position: center;
    height: auto;
  }
}

.footer {
  padding: 25px 0;
  background-color: #f2f2f2;
  bottom: 0;
  width: 100%;
}
.navbar {
  margin-bottom: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: auto;
}


@media (max-width: 768px) {
  .logo-container {
    margin-top: 50px;
  }


  .footer {
    position: relative;
  }
  .navbar {
      position: relative;
}

&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
&lt;div class=&quot;background-container&quot;&gt;&lt;/div&gt;
&lt;nav class=&quot;navbar navbar-expand-sm navbar-light bg-light&quot;&gt;
&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;The Backyard&lt;/a&gt;
&lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
&lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
&lt;li class=&quot;nav-item active&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;#home&quot;&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;#about&quot;&gt;About&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;#events&quot;&gt;Events&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;div class=&quot;logo-container&quot;&gt;
&lt;img src=&quot;http://placekitten.com/g/100/100&quot; alt=&quot;Logo&quot;&gt;
&lt;/div&gt;
&lt;footer class=&quot;footer&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;p&gt;The Backyard&lt;br&gt;
at Boca Fiesta &amp; Palomino&lt;br&gt;
232 1/2 SE 1st st.&lt;br&gt;
Gainesville, FL 32601&lt;/p&gt;
&lt;/div&gt;
&lt;/footer&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Trying to add background image in html and css behind the nav bar so space doesn't show when scrolling

问题

答案1

答案2

如何删除底部正文内的额外空白。

是否可以从字符串创建共享工作者并在不共享工作者URL的情况下使用它？

为什么图像会影响我的
大小？

如何使一个 flexbox 容器适用于多个元素，但只有一个可见。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论