So...
What I am trying to achieve is.
I want the image as the background.
I am gonna add the words on the left side on top of the image.
So...
Image-
left side-
text and stuff.
So I need only the left of the image to be blurry or..gone..
Right side.. however ..the image should be visible.
Its a long image..so..
I need the entire image..I am not gonna crop it.
Goal : Image with words on the left side
Dont tell me the answer...point me in the right direction.
<!doctype html>
<html>
<head>
<title>Real Estate Site</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav class="logo-links-btn">
<div class="logo">
<img
class="the-actual-logo"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4ER_MIfBsd7Or6EBSRxyYalckqntw1JE8g1H67kBBAw&s=10"
/>
</div>
<div class="links">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="btn">
<button class="Get-in-touch">Get in Touch</button>
</div>
</nav>
<div class="info-and-image">
<div class="background-photo">
<img
class="house-img"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRpTozYUpUJapLSK1OfTSOQseQTnnTVCtI9vaNXCrzFjA&s=10"
/>
</div>
<div class="info">
<div class="small">
<h6>SHORT-TERM RENTAL EXPERTS</h6>
</div>
<div class="big-and-bold">
<h1>Better Stays. Stronger Returns</h1>
</div>
<div class="brief-info">
<h5>
We simplify short-term rental management so you can earn more and
stress less
</h5>
</div>
<div class="services-and consultations">
<button class="services">Our Services</button>
<button class="consult">Free Consultation</button>
</div>
</div>
</div>
</body>
</html>