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

huangapple
go评论81阅读模式
英文:

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

问题

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

  1. .navbar {
  2.   margin-top: 0;
  3.   margin-bottom: 0;
  4. }
  6. .footer {
  7.   margin-top: 0;
  8.   margin-bottom: 0;
  9. }

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

英文:

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!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2.   box-sizing: border-box;
  3. }
  4.   body, html {
  5.   margin: 0 auto;
  6.   padding: 0;
  7. }
  9. .background-container {
  10.   background-image: url(&quot;http://placekitten.com/g/500/500&quot;);
  11.   background-size: cover;
  12.   background-position: center;
  13.   position: fixed;
  14.   width: 100%;
  15.   height: 100%;
  16.   opacity: 0.5;
  17.   z-index: -1;
  18.   background-repeat: no-repeat;
  19. }
  22. .logo-container {
  23.   display: flex;
  24.   justify-content: center;
  25.   align-items: center;
  26.   height: 30%; /* Adjust the height as needed */
  27. }
  29. .logo-container img{
  30.   max-width: auto;
  31.   max-height: 600px;
  32.   text-align: center;
  35. }
  37. @media screen and (max-width: 768px) {
  38.   /* Adjust background image for mobile devices */
  39.   .background-container {
  40.     background-position: center;
  41.     height: auto;
  42.   }
  43. }
  45. .footer {
  46.   padding: 25px 0;
  47.   background-color: #f2f2f2;
  48.   bottom: 0;
  49.   width: 100%;
  50. }
  51. .navbar {
  52.   margin-bottom: 0;
  53.   border-radius: 0;
  54.   margin: 0;
  55.   padding: 0;
  56.   width: 100%;
  57.   overflow: auto;
  58. }
  61. @media (max-width: 768px) {
  62.   .logo-container {
  63.     margin-top: 50px;
  64.   }
  67.   .footer {
  68.     position: relative;
  69.   }
  70.   .navbar {
  71.       position: relative;
  72. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
  5. &lt;nav class=&quot;navbar navbar-expand-sm navbar-light bg-light&quot;&gt;
  6.   &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;The Backyard&lt;/a&gt;
  7.   &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;
  8.     &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  9.   &lt;/button&gt;
  10.   &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
  11.     &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
  12.       &lt;li class=&quot;nav-item active&quot;&gt;
  13.         &lt;a class=&quot;nav-link&quot; href=&quot;#home&quot;&gt;Home&lt;/a&gt;
  14.       &lt;/li&gt;
  15.       &lt;li class=&quot;nav-item&quot;&gt;
  16.         &lt;a class=&quot;nav-link&quot; href=&quot;#about&quot;&gt;About&lt;/a&gt;
  17.       &lt;/li&gt;
  18.       &lt;li class=&quot;nav-item&quot;&gt;
  19.         &lt;a class=&quot;nav-link&quot; href=&quot;#events&quot;&gt;Events&lt;/a&gt;
  20.       &lt;/li&gt;
  21.       &lt;li class=&quot;nav-item&quot;&gt;
  22.         &lt;a class=&quot;nav-link&quot; href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;
  23.       &lt;/li&gt;
  24.     &lt;/ul&gt;
  25.   &lt;/div&gt;
  26. &lt;/nav&gt;
  28. &lt;div class=&quot;background-container&quot;&gt;&lt;/div&gt;
  29.   &lt;div class=&quot;logo-container&quot;&gt;
  30.     &lt;img src=&quot;http://placekitten.com/g/100/100&quot; alt=&quot;Logo&quot;&gt;
  31.     &lt;/div&gt;
  33. &lt;footer class=&quot;footer&quot;&gt;
  34.   &lt;div class=&quot;container&quot;&gt;
  35.     &lt;p&gt;The Backyard&lt;br&gt;
  36.       at Boca Fiesta &amp; Palomino&lt;br&gt;
  37.       232 1/2 SE 1st st.&lt;br&gt;
  38.       Gainesville, FL 32601&lt;/p&gt;
  39.   &lt;/div&gt;
  40. &lt;/footer&gt;

<!-- end snippet -->

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 &lt;body&gt; 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.

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

  1. * {
  2.   box-sizing: border-box;
  3. }
  4.   body, html {
  5.   margin: 0 auto;
  6.   padding: 0;
  7. }
  9. .background-container {
  10.   background-image: url(&quot;http://placekitten.com/g/500/500&quot;);
  11.   background-size: cover;
  12.   background-position: center;
  13.   position: fixed;
  14.   width: 100%;
  15.   height: 100%;
  16.   opacity: 0.5;
  17.   z-index: -1;
  18.   background-repeat: no-repeat;
  19. }
  22. .logo-container {
  23.   display: flex;
  24.   justify-content: center;
  25.   align-items: center;
  26.   height: 30%; /* Adjust the height as needed */
  27. }
  29. .logo-container img{
  30.   max-width: auto;
  31.   max-height: 600px;
  32.   text-align: center;
  35. }
  37. @media screen and (max-width: 768px) {
  38.   /* Adjust background image for mobile devices */
  39.   .background-container {
  40.     background-position: center;
  41.     /*height: auto;*/    /* &lt;=======  REMOVE THIS */
  42.   }
  43. }
  45. .footer {
  46.   padding: 25px 0;
  47.   background-color: #f2f2f2;
  48.   bottom: 0;
  49.   width: 100%;
  50. }
  51. .navbar {
  52.   margin-bottom: 0;
  53.   border-radius: 0;
  54.   margin: 0;
  55.   padding: 0;
  56.   width: 100%;
  57.   overflow: auto;
  58. }
  61. @media (max-width: 768px) {
  62.   .logo-container {
  63.     margin-top: 50px;
  64.   }
  67.   .footer {
  68.     position: relative;
  69.   }
  70.   .navbar {
  71.       position: relative;
  72. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
  5. &lt;nav class=&quot;navbar navbar-expand-sm navbar-light bg-light&quot;&gt;
  6.   &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;The Backyard&lt;/a&gt;
  7.   &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;
  8.     &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  9.   &lt;/button&gt;
  10.   &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
  11.     &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
  12.       &lt;li class=&quot;nav-item active&quot;&gt;
  13.         &lt;a class=&quot;nav-link&quot; href=&quot;#home&quot;&gt;Home&lt;/a&gt;
  14.       &lt;/li&gt;
  15.       &lt;li class=&quot;nav-item&quot;&gt;
  16.         &lt;a class=&quot;nav-link&quot; href=&quot;#about&quot;&gt;About&lt;/a&gt;
  17.       &lt;/li&gt;
  18.       &lt;li class=&quot;nav-item&quot;&gt;
  19.         &lt;a class=&quot;nav-link&quot; href=&quot;#events&quot;&gt;Events&lt;/a&gt;
  20.       &lt;/li&gt;
  21.       &lt;li class=&quot;nav-item&quot;&gt;
  22.         &lt;a class=&quot;nav-link&quot; href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;
  23.       &lt;/li&gt;
  24.     &lt;/ul&gt;
  25.   &lt;/div&gt;
  26. &lt;/nav&gt;
  28. &lt;div class=&quot;background-container&quot;&gt;&lt;/div&gt;
  29.   &lt;div class=&quot;logo-container&quot;&gt;
  30.     &lt;img src=&quot;http://placekitten.com/g/100/100&quot; alt=&quot;Logo&quot;&gt;
  31.     &lt;/div&gt;
  33. &lt;footer class=&quot;footer&quot;&gt;
  34.   &lt;div class=&quot;container&quot;&gt;
  35.     &lt;p&gt;The Backyard&lt;br&gt;
  36.       at Boca Fiesta &amp; Palomino&lt;br&gt;
  37.       232 1/2 SE 1st st.&lt;br&gt;
  38.       Gainesville, FL 32601&lt;/p&gt;
  39.   &lt;/div&gt;
  40. &lt;/footer&gt;

<!-- end snippet -->

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，但我想不出如何以这种方式应用不透明度。所以，只需将&lt;div class=&quot;background-container&quot;&gt;&lt;/div&gt;移到页面顶部。

  1. * {
  2.   box-sizing: border-box;
  3. }
  5. body, html {
  6.   margin: 0 auto;
  7.   padding: 0;
  8. }
  10. .background-container {
  11.   background-image: url("http://placekitten.com/g/500/500");
  12.   background-size: cover;
  13.   background-position: center;
  14.   position: fixed;
  15.   width: 100%;
  16.   height: 100%;
  17.   opacity: 0.5;
  18.   z-index: -1;
  19.   background-repeat: no-repeat;
  20. }
  22. .logo-container {
  23.   display: flex;
  24.   justify-content: center;
  25.   align-items: center;
  26.   height: 30%; /* 根据需要调整高度 */
  27. }
  29. .logo-container img {
  30.   max-width: auto;
  31.   max-height: 600px;
  32.   text-align: center;
  33. }
  35. @media screen and (max-width: 768px) {
  36.   /* 调整移动设备的背景图像 */
  37.   .background-container {
  38.     background-position: center;
  39.     height: auto;
  40.   }
  41. }
  43. .footer {
  44.   padding: 25px 0;
  45.   background-color: #f2f2f2;
  46.   bottom: 0;
  47.   width: 100%;
  48. }
  50. .navbar {
  51.   margin-bottom: 0;
  52.   border-radius: 0;
  53.   margin: 0;
  54.   padding: 0;
  55.   width: 100%;
  56.   overflow: auto;
  57. }
  59. @media (max-width: 768px) {
  60.   .logo-container {
  61.     margin-top: 50px;
  62.   }
  64.   .footer {
  65.     position: relative;
  66.   }
  68.   .navbar {
  69.     position: relative;
  70.   }
  71. }
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  2. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  3. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  5. <div class="background-container"></div>
  7. <nav class="navbar navbar-expand-sm navbar-light bg-light">
  8.   <a class="navbar-brand" href="#">The Backyard</a>
  9.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  10.     <span class="navbar-toggler-icon"></span>
  11.   </button>
  12.   <div class="collapse navbar-collapse" id="navbarNav">
  13.     <ul class="navbar-nav ml-auto">
  14.       <li class="nav-item active">
  15.         <a class="nav-link" href="#home">Home</a>
  16.       </li>
  17.       <li class="nav-item">
  18.         <a class="nav-link" href="#about">About</a>
  19.       </li>
  20.       <li class="nav-item">
  21.         <a class="nav-link" href="#events">Events</a>
  22.       </li>
  23.       <li class="nav-item">
  24.         <a class="nav-link" href="#contact">Contact</a>
  25.       </li>
  26.     </ul>
  27.   </div>
  28. </nav>
  30. <div class="logo-container">
  31.   <img src="http://placekitten.com/g/100/100" alt="Logo">
  32. </div>
  34. <footer class="footer">
  35.   <div class="container">
  36.     <p>The Backyard<br>
  37.       at Boca Fiesta & Palomino<br>
  38.       232 1/2 SE 1st st.<br>
  39.       Gainesville, FL 32601</p>
  40.   </div>
  41. </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 &lt;div class=&quot;background-container&quot;&gt;&lt;/div&gt; to the top of the page.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2.   box-sizing: border-box;
  3. }
  4.   body, html {
  5.   margin: 0 auto;
  6.   padding: 0;
  7. }
  9. .background-container {
  10.   background-image: url(&quot;http://placekitten.com/g/500/500&quot;);
  11.   background-size: cover;
  12.   background-position: center;
  13.   position: fixed;
  14.   width: 100%;
  15.   height: 100%;
  16.   opacity: 0.5;
  17.   z-index: -1;
  18.   background-repeat: no-repeat;
  19. }
  22. .logo-container {
  23.   display: flex;
  24.   justify-content: center;
  25.   align-items: center;
  26.   height: 30%; /* Adjust the height as needed */
  27. }
  29. .logo-container img{
  30.   max-width: auto;
  31.   max-height: 600px;
  32.   text-align: center;
  35. }
  37. @media screen and (max-width: 768px) {
  38.   /* Adjust background image for mobile devices */
  39.   .background-container {
  40.     background-position: center;
  41.     height: auto;
  42.   }
  43. }
  45. .footer {
  46.   padding: 25px 0;
  47.   background-color: #f2f2f2;
  48.   bottom: 0;
  49.   width: 100%;
  50. }
  51. .navbar {
  52.   margin-bottom: 0;
  53.   border-radius: 0;
  54.   margin: 0;
  55.   padding: 0;
  56.   width: 100%;
  57.   overflow: auto;
  58. }
  61. @media (max-width: 768px) {
  62.   .logo-container {
  63.     margin-top: 50px;
  64.   }
  67.   .footer {
  68.     position: relative;
  69.   }
  70.   .navbar {
  71.       position: relative;
  72. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
  4. &lt;div class=&quot;background-container&quot;&gt;&lt;/div&gt;
  5. &lt;nav class=&quot;navbar navbar-expand-sm navbar-light bg-light&quot;&gt;
  6. &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;The Backyard&lt;/a&gt;
  7. &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;
  8. &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  9. &lt;/button&gt;
  10. &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
  11. &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
  12. &lt;li class=&quot;nav-item active&quot;&gt;
  13. &lt;a class=&quot;nav-link&quot; href=&quot;#home&quot;&gt;Home&lt;/a&gt;
  14. &lt;/li&gt;
  15. &lt;li class=&quot;nav-item&quot;&gt;
  16. &lt;a class=&quot;nav-link&quot; href=&quot;#about&quot;&gt;About&lt;/a&gt;
  17. &lt;/li&gt;
  18. &lt;li class=&quot;nav-item&quot;&gt;
  19. &lt;a class=&quot;nav-link&quot; href=&quot;#events&quot;&gt;Events&lt;/a&gt;
  20. &lt;/li&gt;
  21. &lt;li class=&quot;nav-item&quot;&gt;
  22. &lt;a class=&quot;nav-link&quot; href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;
  23. &lt;/li&gt;
  24. &lt;/ul&gt;
  25. &lt;/div&gt;
  26. &lt;/nav&gt;
  27. &lt;div class=&quot;logo-container&quot;&gt;
  28. &lt;img src=&quot;http://placekitten.com/g/100/100&quot; alt=&quot;Logo&quot;&gt;
  29. &lt;/div&gt;
  30. &lt;footer class=&quot;footer&quot;&gt;
  31. &lt;div class=&quot;container&quot;&gt;
  32. &lt;p&gt;The Backyard&lt;br&gt;
  33. at Boca Fiesta &amp; Palomino&lt;br&gt;
  34. 232 1/2 SE 1st st.&lt;br&gt;
  35. Gainesville, FL 32601&lt;/p&gt;
  36. &lt;/div&gt;
  37. &lt;/footer&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月30日 05:49:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/76360491.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定