CODEWITHSUNDEEP
htmlcss
user768861
user768861

Reputation: 83

Position absolute makes the background image disappear and I'm not sure why

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/[email protected]/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>

Upvotes: 2

Views: 3080

Answers (2)

Ako
Ako

Reputation: 1583

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

Upvotes: 2

Thunderarea
Thunderarea

Reputation: 479

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?

Upvotes: 1

Related Questions