Bootstrap: Need help figuring out how to code this background responsively. - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 17, 2014 at 12:03 pm #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!

January 20, 2014 at 9:40 am #160820

Paulie_D
Member

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.

January 20, 2014 at 9:45 am #160821

Paulie_D
Member

http://erskinedesign.com/blog/responsive-svg-background-images/

January 20, 2014 at 10:35 am #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.

January 20, 2014 at 10:36 am #160827

FFRedshirt
Participant

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

January 20, 2014 at 11:10 am #160828

Paulie_D
Member

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.

January 20, 2014 at 11:19 am #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.

January 20, 2014 at 11:06 pm #160865

nixnerd
Participant

You can also go background-size: cover;.
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘CSS’ is closed to new topics and replies.