Menu icon Foundation
Full width row with two backgrounds (two 6-column divs with backgrounds extending to row)

Hi guys,

I'm probably overlooking something but I cannot seem to figure this out.

I'm trying to recreate the features-intro section (just after the fold) on the following page:

http://tympanus.net/Freebies/Boxify/

Normally I would create two 6-column divs and add a background colour to the row if I wanted the background colour to fill up the entire row . However, how would I go about doing that if I wanted two background elements. One background-image filling up one half of the row and one background-colour taking up the other half. Preferably that the small-6 divs take up the full width in mobile

Hope this makes sense and someone can help me.

x

Suzy

rowbackgroundfluidsmall-6

Hi guys,

I'm probably overlooking something but I cannot seem to figure this out.

I'm trying to recreate the features-intro section (just after the fold) on the following page:

http://tympanus.net/Freebies/Boxify/

Normally I would create two 6-column divs and add a background colour to the row if I wanted the background colour to fill up the entire row . However, how would I go about doing that if I wanted two background elements. One background-image filling up one half of the row and one background-colour taking up the other half. Preferably that the small-6 divs take up the full width in mobile

Hope this makes sense and someone can help me.

x

Suzy

Nick Caldwell over 4 years ago

Couple ways: use the Equalizer plugin, or a CSS3 gradient background with a very sharp division between the two colours at 50%.

Nick Caldwell over 4 years ago

Addendum, I did a test of the gradient method a while ago, but I haven't used it on a production site.

http://codepen.io/Rocketpilot/pen/ecDoh

Suzy van Houten over 4 years ago

Dear Nick,

Thanks for taking the time to answer me. I looked at the codepen you made.

I guess I might not have been clear enough in explaining what I want. I'm not looking to create equal height columns. I want the background of both two small-6 divs in my row to take up the full width of the page , or the background of the row to consist of two backgrounds.

Just have another look at the example page I provided. You'll get a better understanding of what I mean.
I want to create the same thing as the panel just underneath "watch the video"

Any help is very much appreciated

Nick Caldwell over 4 years ago

Sorry, yes, to be honest I got a bit confused as those links auto-redirected for me in various annoying ways so I wasn't sure what I should've been looking at.

Well, when I want to do "full bleed" stuff I'd wrap the row in a "container" div that has no specific width set. If your design isn't containing everything inside a "page" div with a width set, the container will go edge to edge.

eg:

<body>
<div class="container">
<div class="row">etc</div>
</div>
</body>

And set the background properties roughly as indicated. You'd probably need to stack multiple background images though, one of which is the content you want with half transparent, and use background-size: cover to tweak it. I haven't tried this myself but that's how I'd start to figure out how to achieve that effect.

Rafi Benkual over 4 years ago
Nick Caldwell over 4 years ago

Raft's method works, but requires a fixed height; my way wouldn't work on mobile without an extra media query to maybe alter the background image positioning for smaller screens. An interesting problem!

Peter Finlan over 4 years ago

Hi Suzy

My name is Peter Finlan - I created the Boxify website you are referring to as an example so I thought I might be able to help here!

Although I used the Bootstrap 3 CSS framework for this website, the principal here is exactly the same using Foundation. You will first need to stretch your .row div out to 100% so that the sibling divs inside (6 column divs) can stretch out to 100% width also. I like to do this by creating a .fullWidth class in my CSS and setting a max-width: 100%; property.

After this you will need to add an extra class to both of your medium-6 column divs, one class that will contain the background-image property, and the other class on the other medium-6 column div to contain the background-color property. Essentially, your code should look something like this:

<div class="row fullwidth collapse">
  <div class="medium-6 columns bg-img">
  </div>
  <div class="medium-6 columns bg-color">
  </div>
</div>

From here, all you need to do is to add some CSS to style your new classes. Firstly, the background-image property on the .bg-img class, and secondly the background-color property to the .bg-color class.

I have created a pen for reference: http://codepen.io/peterfinlan/pen/OPvOBd

Hope this helps :)

Cheers.

Suzy van Houten over 4 years ago

Thanks again. I really appreciate all the help.

I've been trying out Rafi's/Peter's method by applying a full-width class to my row and giving the column divs their respective backgrounds. But I was wondering if you could advise me.

What do I do if I want the content placed within those two column divs to respect/follow the grid system?
Do I manually add my own padding or is there a better way?

I tried nesting a regular row within my full-width row. Do I add max-width:35.625rem to the nested row? (Or would $row-width/2 be fine?) Where do I go from there? Not sure what the best practice would be and if I'm on the right track.

Hope you're willing to help me out some more...

BTW. if it is in any way relevant my settings are...

$row-width: rem-calc(1140);
$total-columns: 12;
$column-gutter: rem-calc(20);

Dan Crowe over 3 years ago

 Did you ever figure this out? Im have the same exact question here.

 

http://foundation.zurb.com/forum/posts/39854-row-with-half-in-grid-and-half-fullwidth

 

Thanks

-Dan

moggsterb almost 3 years ago

I found this post because I was looking for a constrained grid with Right hand edge a different colour to the the left edge.

 (Not sure if this is what you were after).

 Anyway I came up with this:

 http://codepen.io/moggsterb/pen/xRjMoW