Background image in div is pushing the content down?

Background image in div is pushing the content that i want it to be BEHIND, is pushing it down. How do i fix this? I want to add a black overlay and change the opacity for this, normally i’d just do it in css for that class.

Can you help me put this image behind the intro or basically behind everything you see in the code pen? I just want it to be for that div.

CODEPEN:
https://codepen.io/admitdefeat/pen/gOpbMvr

That is not a background image but a content…

I’m sorry, what? I don’t understand your sentence. :sweat_smile:

You used <img /> tag. That is a content image, not a background image

1 Like

Using the IMG tag creates an “element” or block of content, which in this case is pushing your other content down.

The easy way to use the image as a background is to target the selector (in this case your class “nav_bar”) and assign it a background property. There are other ways to move text over and image using relative and absolute positioning but that’s more complicated.

Here is an example that I think will help.

1 Like

Thank you lendoo! I get the reason why.

Thank you very much citrine! :laughing::sob:

Just curious is it possible to style background:url("")? I wanted to add an overlay and brign down opacity

@Mrsthing

I’m still learning HTML/CSS myself but I will help the best I can, if anybody see’s any mistakes in my answer please feel free to correct me.

Yes, but it’s not as straight forward as it probably should be. My first thought was to add the opacity property to the same selector as the background property which will work, unfortunately it will also add opacity to everything else in that element.

There are a few workarounds though that you can use and I created this pen so that you can try them out.

The first workaround is to add a linear gradient on top of the background image. You can adjust the color of the overlay to tint the image or use black to darken the image and make text more readable.

The second workaround is to add an additional element just for the background and use absolute positioning to place it on top of your main element. Because the background is the only object in the new div it can be targeted with opacity without affecting the opacity of other objects.

The last workaround is to use a pseudo element and absolute positioning similar to the linear gradient overlay.

Hope this helps!

1 Like

This helped A LOT. I’m understanding it better now. Thank you for taking the time to help out :smiley:!!!