Make contentless-background div a block

[modiophile]

I’ve made a full-width banner image focusing on a specific part of the image using “background-position” and “background-size: cover”

Atop the banner I have an <h2> callout, however on mobile (< 768 ) I’d like for that <h2> to fall under the banner. How do I do that?

I gave the banner a display of block, but it just disappears and the <h2> remains on top even though it comes after the banner in the markup!

See http://codepen.io/modiophile/pen/gbmELG?editors=110

P.S. I’m trying to avoid having to put in text only to hide it. Thanks!

[Paulie_D]

I think you are thinking about this the wrong way.

The callout div should be under the banner by default and then move / shrink when the viewport is greater than 768px…much easier.

Why is everything positioned absolutely?

[modiophile]

Hi Paulie_D,

Actually the callout div (“container”) is under the banner (“hf_img_holder”) in the markup.

The banner “hf_img_holder” is the only element with absolute positioning, and its only applied because I can’t get the background image to render without it. This is probably the crux of my issue here.

[Shikkediel]

If I get the intention correctly:

#home_feature .container {
position: relative;
z-index: -1
}

@media only screen and (min-width: 768px) {
#home_feature .container {
z-index: 1
}
}

[Author]

Posts