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