How to make overlay responsive DIVs?

Hi there,

my first post here.
I’m trying to create some overlay divs as shown below:

I’m moving the image below the div with a z-index negative, then I’m using margin-top: -150px on the DIV in order to shift it upward.

It works when my page is 100% on desktop, but as soon as I resize it, this is what I get:
(I can’t post two pictures right now as I’m a new user - basically the two divs overlap the image and they end up to hide it)

Which make sense, since the image is under the div and both divs have margin-top with negative values.
So, clearly I’m doing this the wrong way.
How can I overlay the divs in order to overlap the image and keep those divs responsive when I resize the page in order to keep the image visible and not occlude it?

General rule of thumb when working with conflicts in html, add more containers. For example, perhaps the image should be within a div with a position property set to absolute, that way any sibling elements to that container will simply take up their normal space.

    <div style="position:absolute;>
        <div id="block1"></div>
        <div id="block2"></div>

It would be helpful to see the code you’re working with to offer a more descriptive answer though.

1 Like

Thanks for your reply emgo_dev,

all the elements in my page are within respective containers.
If I use position absolute then the result is kind of messy.
I’ll post a wip of my code soon.

You could also try using a background-image property. I am not sure if this gets ahead of your exercise, but apply the background image to your container, then you won’t have to worry about any code flow at all, because it’s like a wallpaper at that point. Background-image

The background wouldn’t work either, because I need to prevent the divs to cover the div with the image as a background anyway.

This is the part of the code which I’m working with:

The img that gets occluded is @

What you’re looking to do sounds like it’s causing a deal of conflict with bootstrap.

Here’s a hand coded example of what I feel you’re trying to do.

I’ve included your section elements inside the main image container, that way they will share the same positioning as that section, and you can create separate classes to define different properties. The section container has it’s styles in .section and there is a separate class .img-1 for applying properties to it. Following sections could be .img-2 and so on with the same general structure.

Thank you so much emgo_dev, that seems exactly what I’m trying to do!

One thing I haven’t added yet since I was stuck with the occluding issue, is a button as the image is supposed to work as a link. I guess I can simply add a link to the img and that should already work? (eventually will be a mouse-over…).

If you decide to use the code I wrote up for you, no you could not, because the container is either a or a

, however you alter it. The image is just a background property.

What you could do with this code, which is a method I often use in other situations when making a link, is create an empty < a > tag within the container, then set the properties to

a {
    display: block;
    width: 100%;
    height: 100%:

This will cause the a tag to fill up the space of the container (You’ll notice the rendered area if you view it with dev tools, or just apply a background-color to track the elements dimensions). However the section class will first need to also have the display property set to block (a good precaution) and the min-height must be changed to height 500px (because css won’t register a height 100% for a min-height value). This will also cause the second section to be pushed further down, no real way past that, so just invert the translate I placed on the second section to -195 ish pixels and you’ll have the same look as before except the image is now clickable.

You can see how this would look and work here