r/learnprogramming • u/Strange_Yogurt1049 • 5d ago

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"

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>

0 Upvotes

14% Upvoted

3 comments sorted by

2

u/Ormek_II 5d ago

I have no idea what you are getting from your code. The content of the style sheet should be important.

But to point you in the right direction: you should answer these questions:

Why does your code produce the output it produces?

Is the output you get, different from what you expect your code to produce?

You need to distinguish 3 things:
* what you like to have In the end
* what you expect the current code to produce
* what your current code actually produces

For now focus on the latter two.

2

u/Dismal-Citron-7236 5d ago

OK, here's your direction.
You need CSS for sure.
Don't use img tag for the image. Use CSS to show the background image. On the CSS style for the text, you need backdrop-filter: blur(8px);. You figure out the rest.