Forums

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

Home Forums CSS Bootstrap: Need help figuring out how to code this background responsively.

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #160656
    FFRedshirt
    Participant

    Hello all,

    I was hoping someone could assist me make sense of how to properly implement this:

    So I have a header image (currently using a jumbotron to fake that positioning) and I want to add a few backgrounds that will assist in separating the content areas.

    The problem is these backgrounds are not simple squares but rather odd shapes built with SVG. The catch that has been causing me to go nuts is how do you make an odd shape stay put while the responsiveness of the page is at work? once i got one into the design i was stuck trying to figure out how to add another (id tie one to the bod y) bad!

    Do you all have a suggestion how to implement this in a manner i would be able to maintain two of those shapes on a single page?

    Here is my codepen: http://cdpn.io/wrnsk

    let me know if nothing makes sense!

    #160820
    Paulie_D
    Moderator

    If you are referring to the green ‘arrow’ , switch up thebackground-size tocontain…it’s mostly there although you might have to change the vertical position.

    #160821
    Paulie_D
    Moderator
    #160826
    FFRedshirt
    Participant

    I may not have been clear – apologies! I had pulled an all nighter trying to get a site to launch so I may not have been clear.

    Basically what I’m trying to figure out is is it possible to use bootstrap and keep a row of content contained within an svg background image throughout its responsive widths.

    Heres a mock up of what I’m referring to:

    Here you see large desktop view – what you see here is that odd red shape (I put it as an overlay but just imagine it being a background). I have a container class then within the container I have a row with 2 col-md-6’s to split up the content.

    The red “arrow’ thingy should contain container but also respond to browser resizes appropriately.

    Here is medium desktop – again as the user resizes the browser the content still remains within the arrow.

    Then finally mobile:

    The part I struggle with is how to stay within the confines of the arrow as the browser resizes.

    #160827
    FFRedshirt
    Participant

    I’m just now checking out your link Paul. Thanks!

    #160828
    Paulie_D
    Moderator

    You’d be spending a lot of time designing media queries getting that to work.

    The problem is that a background can’t respond to it’s elements content…..it’s a background.

    Unfortunately, your design requirements are ahead of web browser technology at the moment. Once CSS regions become fully functional in browsers, you might have a shot.

    #160831
    FFRedshirt
    Participant

    Thats what I thought. I’ve been trying to find a solution – but I havent seen any without insane amounts of media queries like you mentioned. And being that browsers may render slightly differently it could very well turn into a nightmare.

    #160865
    nixnerd
    Participant

    You can also go background-size: cover;.

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