Forums

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
    Posts
  • #193439
    modiophile
    Participant

    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!

    #193441
    Paulie_D
    Moderator

    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?

    #193446
    modiophile
    Participant

    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.

    #193456
    Shikkediel
    Participant

    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.