Question 266030 in Html Question posted in
Some basic documentation can be found here.

Html – When using position absolute inside ::before selector it's not working

I was trying to set my background image using the ::before selector and I used position absolute but when i inspected the same in the browser it shows the position as absolute but I’m not able to use z-index, top or left.
When i use height auto the image disappears totally. This other image is when height is 100% ->
Image shows the position set as absolute but not able to use z-index, left or top. This happens when height is 100%

<!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="/css/style1.css" />
    <title>The Fighters Stop</title>
  </head>
  <body>
    <header class="header">
      <nav class="navbar">
        <ul class="r-wing no-disc">
          <li class="nav-items" id="logo">LOGO</li>
        </ul>
        <ul class="l-wing no-disc">
          <li class="nav-items">HOME</li>
          <li class="nav-items">ABOUT</li>
          <li class="nav-items">CONTACT US</li>
          <li class="nav-items">PARTNERS</li>
        </ul>
      </nav>
      <h1>The Fighters Stop</h1>
      <p>
        Here you can get all varieties of martial arts gear without compromising
        the quality.
      </p>
      <button type="submit">Order Now</button>
    </header>
    <main>
      <section id="sec-1">
        <div class="items1"></div>
        <div class="items2"></div>
        <div class="items3"></div>
        <div class="items4"></div>
        <div class="items5"></div>
        <div class="items6"></div>
        <div class="items7"></div>
        <div class="items8"></div>
        <div class="items9"></div>
        <div class="items10"></div>
        <div class="items11"></div>
        <div class="items12"></div>
      </section>
      <section id="sec-2">
        <ul class="no-disc">
          <li>Partner</li>
          <li>Partner</li>
          <li>Partner</li>
          <li>Partner</li>
          <li>Partner</li>
        </ul>
      </section>
      <footer id="contact-sec">
        <form action="noaction.node" method="get">
          <div class="form-group">
            <label for="name">Your Name</label>
            <input type="text" name="name" id="name" placeholder="Enter your name..."/>
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="text" name="email" id="email" placeholder="Enter your E-mail..."/>
          </div>
          <div class="form-group">
            <label for="phone-num">Phone Number</label>
            <input type="text" name="phone-num" id="phone-num" placeholder="Enter your phone number..."/>
          </div>
          <div class="form-group">
            <label for="comments">Comments(Feedback)</label>
            <input type="text" name="comments" id="comments" placeholder="any comments..."/>
          </div>
        </form>
      </footer>
    </main>
  </body>
</html>


body {
    margin: 0;
    padding: 0;
}

.header {
    text-align: center;
}

.header::before {
    content: "";
    background: url("https://wallpaperbat.com/img/138398-ufc-hd-wallpaper-and-background-image.jpg") no-repeat center center/cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
    opacity: 0.8;
    color: red;
}
.navbar {
    display: flex;
    justify-content: space-between;
}
.r-wing, .l-wing {
    display: flex;
}

.l-wing {
    width: 30%;
    justify-content: space-around;
}

.no-disc {
    list-style-type: none;
}
Tags:

2

Answers


  1. 0

    You can not use height auto here, as ::before is in fact an empty block, so height-auto===0. If it should be the same size as the header, you should give header position relative and to before height: 100%;

    body {
    margin: 0;
    padding: 0;
}

.header {
position: relative;
    text-align: center;
}

.header::before {
    content: "";
    background: url("https://wallpaperbat.com/img/138398-ufc-hd-wallpaper-and-background-image.jpg") no-repeat center center/cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.8;
    color: red;
}
.navbar {
    display: flex;
    justify-content: space-between;
}
.r-wing, .l-wing {
    display: flex;
}

.l-wing {
    width: 30%;
    justify-content: space-around;
}

.no-disc {
    list-style-type: none;
}
    Login or Signup to reply.
  2. 0

    You should give the parent element -which is (header)- position: relative; after that you can use position: absolute; on (::before)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search