Html - How do I place an element relatively to an image using background-image and ::before/::after?

wuwu
November 21, 2023
226 views
0 votes
2 Answers

I’d like to position an element (using ::before/::after) relative to an image (using background-image), but it doesn’t seem to work.

If I add position: absolute to &--right::after will the &--right element be the closest parent with position relative?

I mean the element should be in the lower right corner but it appears in the middle. I think it shouldn’t be there since I position it relative to its parent?

I was trying to do my best to explain, but English is not my first language. I believe the screenshots I added below will explain better

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  background-color: var(--very-light-cream);
  scroll-behavior: smooth;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}

.header__container {
  background-color: #d3d3d3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 7rem;
  margin: 0 auto;
  padding: 0 9rem;
}
.header__container ul {
  padding: 0;
  list-style: none;
}
.header__container ul li {
  display: inline-block;
  padding: 0 1.8rem;
}
.header__container ul li a {
  color: #232323;
  text-decoration: none;
}
.header__container .nav-toggle {
  display: none;
  position: absolute;
  top: 0.5rem;
  right: 4rem;
  cursor: pointer;
}
.header__container .nav-toggle img {
  width: 2.5rem;
  transition: 300ms all ease;
}
.header__container .nav-toggle:hover img {
  opacity: 0.6;
}
.header__container .open {
  height: 100vh;
}
.header__container .hidden {
  display: none;
}
.header__hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12rem;
  margin: 6rem 9rem;
}
.header__hero h1 {
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0.01875rem;
}
.header__hero p {
  font-size: 1.25rem;
  line-height: 140%;
  padding: 3rem 0;
}
.header__hero--right {
  position: relative;
  background-image: url("/assets/8331.png");
  height: 46.1rem;
  width: 78.8rem;
  background-size: cover;
  -o-object-fit: cover;
     object-fit: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top-left-radius: 3.13rem;
}
.header__hero--right::after {
  position: absolute;
  content: url("/assets/Vector.png");
  bottom: 0;
  left: 0;
  width: 20rem;
  height: 30rem;
}
.header input[type=text] {
  width: 25rem;
  height: 5.2rem;
}
.header input[type=text]::-moz-placeholder {
  padding-left: 1rem;
}
.header input[type=text]::placeholder {
  padding-left: 1rem;
}
.header input[type=submit] {
  height: 5.2rem;
  background-color: rgb(60, 75, 166);
  color: #fff;
  padding: 0 1.5rem;
  font-weight: 700;
  line-height: 170%; /* 1.9125rem */
  letter-spacing: 0.0125rem;
}

@media (max-width: 720px) {
  .header__container {
    flex-direction: column;
    align-items: flex-start;
  }
  .header__container nav {
    height: 0;
    width: 100%;
    overflow: hidden;
    transition: 250ms height ease-in-out;
  }
  .header__container ul {
    margin-top: 2.5rem;
  }
  .header__container ul li {
    display: block;
    text-align: center;
    padding: 0.2rem 0;
  }
  .header__container ul li a {
    font-size: 2rem;
  }
  .header__container ul li a:hover {
    color: #191919;
  }
  .header .nav-toggle {
    display: block;
  }
  .header .nav-toggle .hidden2 {
    display: none;
  }
}/*

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Source+Sans+3:wght@400;700&display=swap"
            rel="stylesheet" />
        <link rel="stylesheet" href="/css/main.css" />
        <title>Document</title>
    </head>
    <body>
        <header class="header">
            <div class="header__container">
                <div>
                    <h2>LOGO</h2>
                    <div class="nav-toggle" id="navToggle">
                        <img
                            id="navClosed"
                            class="navIcon"
                            src="https://www.richardmiddleton.me/wp-content/themes/richardcodes/assets/img/hamburger.svg"
                            alt="hamburger menu" />
                        <img
                            id="navOpen"
                            class="navIcon hidden"
                            src="https://www.richardmiddleton.me/wp-content/themes/richardcodes/assets/img/close.svg"
                            alt="close hamburger" />
                    </div>
                </div>
                <nav>
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Forum</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </nav>
            </div>

            <div class="wrapper">
                <div class="header__hero ">
                    <div class="header__hero--left">
                        <h1>Your strategy is only as good as you execute it</h1>
                        <p>Our simple but powerful OKR+ platform turns great strategies into amazing results. And it's free.</p>
                        <form >
                        <input type="text" placeholder="Enter Your Email" />
                        <input type="submit" value="Get Started" />
                      </form>
                    </div>
                    <div class="header__hero--right">
                       <div class="right-image"></div>
                    </div>
                </div>
            </div>
        </header>

        <script src="/js/sctipt.js"></script>
    </body>
</html>

The result I’ve got:

How it should be:

position: absolute
position: relative

Answers

Here is simple example for before and after image set and how to use for your criteria

.main-image-container {
      position: relative;
      width: 250px; /* Adjust the width as needed */
      height: 400px; /* Adjust the height as needed */
    }

    .main-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .main-image-container::before {
      content: "";
      position: absolute;
      top: -20px;
      right: -20px;
      width: 50px; /* Adjust the width of the top-right image */
      height: 50px; /* Adjust the height of the top-right image */
      background: url('https://i.pinimg.com/564x/4e/96/cb/4e96cbd357952869a1bc20c34f1b01e3.jpg') center/cover no-repeat; /* Replace with your random image path */
      z-index: 1; 
    }

    .main-image-container::after {
      content: "";
      position: absolute;
      bottom: -20px;
      left: -20px;
      width: 50px; /* Adjust the width of the bottom-left image */
      height: 50px; /* Adjust the height of the bottom-left image */
      background: url('https://i.pinimg.com/564x/4e/96/cb/4e96cbd357952869a1bc20c34f1b01e3.jpg') center/cover no-repeat; /* Replace with your random image path */
      z-index: 1; 
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="main-image-container">
  <img class="main-image" src="https://i.pinimg.com/564x/32/90/fd/3290fd1f0504243593d9b7a7ae6bb70a.jpg" alt="Main Image">
</div>

</body>
</html>

As the image is set as a background-image, there is no real need for the pseudo-elements ::before and ::after.

You can have multiple background-image and set their respective size and position:

  background-image: url("https://placehold.co/100x100/orange/white"), url("https://placehold.co/150x100/blue/white"), url("https://placehold.co/600x400");
  background-size: 100px 100px, 150px 100px, cover;
  background-position: bottom left, top right, center;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.header__hero--right {
  background-image: url("https://placehold.co/100x100/orange/white"), url("https://placehold.co/150x100/blue/white"), url("https://placehold.co/600x400");
  height: 400px;
  width: 500px;
  background-size: 100px 100px, 150px 100px, cover;
  object-fit: cover;
  background-position: bottom left, top right, center;
  background-repeat: no-repeat;
}

<div class="header__hero--right">
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do I place an element relatively to an image using background-image and ::before/::after?

Answers