2

I can't figure out why my background image is being removed especially since I can see using inspect element in the browser that the div has a height and a width encompassing pretty much the whole page.

The error is in .full-height where switching the position from relative to absolute causes the image to disappear. I was also curious as to how to flip the orientation of the image background.

   * {
      font-family: "Poppins", sans-serif;
      margin: 0;
      padding: 0;
    }
    
    :root {
      --primary-color: #0f9d58;
      --background-color: #f0f3f7;
      --secon-color: #9da2ad;
      --grey: #7a7a7b;
      --white: #ffffff; /*shortcuts*/
    }
    
    a {
      color: unset;
      text-decoration: none;
    }
    
    body,
    html {
      background-color: var(--background-color);
      scroll-behavior: smooth;
      position: relative;
      overflow: hidden;
    }
    
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%; /*height 100% would mean the viewport*/
      z-index: 99;
      background: var(--background-color);
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }
    
    .menu-wrap {
      max-width: 1366px;
      margin: auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 1rem;
    }
    .menu div {
      display: inline-block;
      padding: 8px 20px;
    }
    .logo {
      font-size: 2rem;
      font-weight: 800;
      color: var(--primary-color);
    }
    
    .menu-item {
      margin-left: 1rem;
      font-weight: 600;
      color: var(--grey);
      transition: 0.5s ease-in-out; /*this reflects a state change*/
      cursor: pointer;
    }
    
    .menu-item:hover,
    .menu-item.active {
      color: var(--white);
      background-color: var(--primary-color);
      border-radius: 1rem;
    }
    
    .cart-btn {
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0f9d58;
      font-size: 2rem;
      cursor: pointer;
      transition: 0.5s ease-in-out;
    }
    
    .cart-btn:hover {
      background-color: #0f9d58;
      color: var(--white);
      border-radius: 1rem;
    }
    
    .fullheight {
      height: 100vh;
      position: relative;
      width: 100%;
    }
    
    .align-items-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .bg-img {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url(images/main.jpg);
    }
    
    .bg-img-fixed {
      background-attachment: fixed; /*The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block CHECK*/
    }
    
    .container {
      width: 100%;
      max-width: 1366px;
      margin: 0 auto;
    }
    
    /*grid system*/
    
    .row {
      display: flex;
      flex-wrap: wrap;
    }
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
          href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,900&display=swap"
          rel="stylesheet"
        />
        <link
          href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
          rel="stylesheet"
        />
        <title>Fresh Food</title>
      </head>
      <body>
        <div class="container">
          <div class="nav">
            <div class="menu-wrap">
              <a href="#home">
                <div class="logo">FRESHFOOD</div>
              </a>
              <div class="menu">
                <a href="#home">
                  <div class="menu-item active">Home</div>
                </a>
                <a href="#about">
                  <div class="menu-item">About</div>
                </a>
                <a href="#menu">
                  <div class="menu-item">Menu</div>
                </a>
                <a href="#testimonial">
                  <div class="menu-item">Testimonials</div>
                </a>
              </div>
              <div class="right-menu">
                <div class="cart-btn">
                  <i class="bx bx-cart-alt"></i>
                </div>
              </div>
            </div>
          </div>
          <div
            class="fullheight align-items-center bg-img bg-img-fixed"
            id="home"
          ></div>
        </div>
      </body>
    </html>
ATP
  • 2,939
  • 4
  • 13
  • 34
user768861
  • 83
  • 1
  • 8
  • 1
    About the orientation of background image check this article: https://www.sitepoint.com/css3-transform-background-image/ – Nick Pantelidis Feb 04 '21 at 14:06
  • 1
    The background-image is disappeared because you have `overfow: hidden;` in the body. Remove it and the image will reappear even if you have `position: absolute;`. Nonetheless, why do you want to change the position from relative to absolute? – Nick Pantelidis Feb 04 '21 at 14:12
  • I'm just experimenting. I'm trying to learn html and css but a lot of it is still quite confusing for me. So I just fiddle with my code every now and then. – user768861 Feb 04 '21 at 16:03
  • 1
    So, there is no reason to change the position from relative to absolute. The relative position is the best solution for your case. – Nick Pantelidis Feb 04 '21 at 17:38

2 Answers2

2

as others said, you can make the background image to be shown by changing overflow tag to overflow: visible;. but its not the best way. when you make position of and element absolute, you make it to remove from the normal flow of the page, so what happens? parent element does not know that child element height and width, so it cannot determine how much space it should fill, so collapses. if you look at container div inside inspect element, it's height is 0 when you make position absolute. by set its height to 100vh your problem will be solved with a better approach. you container class should be like this:

.container {
  width: 100%;
  height: 100vh /*add this line*/
  max-width: 1366px;
  margin: 0 auto;
}
Ako
  • 1,424
  • 12
  • 18
  • Thank you! I tried to accept both but it didn't allow me. – user768861 Feb 04 '21 at 16:02
  • Thank you, my situation was similar to the OP's - the background image did not fill the screen i.e. the width:100% was not effective with absolute. Your comment "when you make position of an element absolute, you make it to remove from the normal flow of the page, so what happens? parent element does not know that child element height and width, so it cannot determine how much space it should fill, so collapses" explains it for me. So thank you. – David Pierson Aug 25 '23 at 00:24
  • @DavidPierson I'm happy that it helped you :) – Ako Aug 26 '23 at 12:36
1

About the image that disappears when you set position to absolute it happens because you have set in body the overflow to hidden

body,
html {
  background-color: var(--background-color);
  scroll-behavior: smooth;
  position: relative;
  overflow: hidden; /*this causes the background-image to disappear*/
}

Delete this line and the image will reappear.

About the orientation of the background image see this article https://www.sitepoint.com/css3-transform-background-image/ or this stackoverflow post How to rotate the background image in the container?

Nick Pantelidis
  • 455
  • 4
  • 12