Forums

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

Home Forums CSS background-image 50% width and 100% height of viewport

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #204745
    tinusmile
    Participant

    I have 2 div’s in one row each 50% of viewport width and each with a background-image. How can I achieve to get these background-images 100% height of the viewport? Thanks a lot!

    #204746
    Shikkediel
    Participant

    Something like this?

    #element {
    background-size: 100% 100vh;
    }
    
    #204748
    tinusmile
    Participant

    Unfortunately this doesn’t work…

    #204749
    Paulie_D
    Member

    Perhaps you could make a demo showing us the issue in Codepen.io

    #204751
    tinusmile
    Participant
    #204752
    Paulie_D
    Member

    So the issue isn’t making the images 100% of the vieport…the issue is making the divs themselves…100% tall…right?

    You’d have to checkout the Bootstrap documentation to see if there is a setting for that as I suspect a lot of the default classes being applied will prevent that.

    #204753
    tinusmile
    Participant

    That could be the solution, I was always thinking of the images…

    #204754
    Paulie_D
    Member

    Background images can’t be bigger that their elements…so you might need to review the Bootstrap demos etc to see if you can do what you want (make the divs 100% tall) using Bootstraps styling.

    I suspect that you may have to override some stuff.

    #204756
    tinusmile
    Participant

    Ok, but if I apply the same CSS to the section element it shows the image 100% of the viewport.

    #204762
    Paulie_D
    Member

    Can’t see that in the demo.

    #204763
    tinusmile
    Participant
    #204765
    Paulie_D
    Member

    So you now have the technique you just need to apply it to the child divs to get the effect you are after.

    #204771
    tinusmile
    Participant

    Right, that works for desktop now! But at the breakpoint to full-width there is an issue because of position: absolute;

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.