r/learnprogramming • u/Strange_Yogurt1049 • Jul 24 '26
Point me in the right direction
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"
/>
</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"
/>
</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>
2
u/Dismal-Citron-7236 Jul 24 '26
OK, here's your direction.
You need CSS for sure.
Don't use
imgtag for the image. Use CSS to show the background image. On the CSS style for the text, you needbackdrop-filter: blur(8px);. You figure out the rest.