I need to position background image to the right of container and a small box of text inside of it to be floating to the left (& overlapping the img)

Question

Here's what I want to achieve both for desktop and mobile:

And here's how far I've gotten with it

.container {
  background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  min-height:700px;
}

.flexbox {
display:flex;
justify-content:center;
align-items: center;
min-height: 700px;
}

.text-box {
  max-width:350px;
  background:#f6f6f6;
  padding: 30px 20px;
}

<div class="container">
  <div class="flexbox">
    <div class="text-box">
      <h1>Complete Remodeling</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
      <a>CONTACT US</a>
    </div>
  </div>
</div>

I tried to achieve a layout with the CSS property background-image, however I lack the knowledge to achieve what I was expecting

Anton Podolsky · Accepted Answer · 2023-02-08T19:22:31.870

For desktop we use margin-left on the container and offset the .text-box in the opposite direction.

For mobile we need to add an absolutely-positioned semi-transparent background element inside .text-box.

body {
  background-color: #f6f6f6;
}

.container {
  background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  min-height:700px;
}

.container.desktop {
  margin-left: 175px;
}

.flexbox {
  display:flex;
  align-items: center;
  min-height: 700px;
}

.container.mobile .flexbox {
   justify-content: center;
}

.text-box {
  position: relative;
  max-width:350px;
  padding: 30px 20px;
}

.container.desktop .text-box {
   left: -175px;
}

.text-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f6f6f6;
}

.container.mobile .text-background {
   opacity: 0.5;
}

.text-content {
  position: relative;
  z-index: 1;
}

<div class="container desktop">
  <div class="flexbox">
    <div class="text-box">
      <div class="text-background"></div>
      <div class="text-content">
        <h1>Complete Remodeling</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
        <a>CONTACT US</a>
      </div>
    </div>
  </div>
</div>

<div class="container mobile">
  <div class="flexbox">
    <div class="text-box">
      <div class="text-background"></div>
      <div class="text-content">
        <h1>Complete Remodeling</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
        <a>CONTACT US</a>
      </div>
    </div>
  </div>
</div>

Thanks Anton, great idea to create the "text-background" and "text-content" divs. That solved my problem, so thank you so much! — John Holliday, Feb 08 '23 at 21:20

I need to position background image to the right of container and a small box of text inside of it to be floating to the left (& overlapping the img)

1 Answers1