The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Make contentless-background div a block

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #193439

    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!


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


    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?


    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.


    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
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.