CODEWITHSUNDEEP
htmlcsssasscss-positioncss-grid
GeekByDesign
GeekByDesign

Reputation: 436

image does not remain within div with absolute position (using css grid)

I'm trying to contain an image within <div class="bg-image"></div> with a header inside that div. But unfortunately the header is being affected by the opacity from class="bg-image"

I added position:absolute; to class="bg-image" this way I can move my header from within the div to the outside and the header will overlap the image. But my site went from How it should look to How it's not suppose to look

My guess is since I'm using CSS Grid the width set to 100% is someway messing it up. My question is how can I contain the image within <div class="bg-image"></div> only with absolute positioning?

jsfiddle

Upvotes: 0

Views: 54

Answers (1)

Arber Sylejmani
Arber Sylejmani

Reputation: 2108

If I understood correctly, just add position: relative to .main-box

https://jsfiddle.net/sp2mjbur/

Upvotes: 1

Related Questions