CODEWITHSUNDEEP
htmlcssresponsive-designzurb-foundation
Snow_Mac
Snow_Mac

Reputation: 5797

Foundation Responsive Web Design

I'm experimenting with foundation. Link: http://foundation.zurb.com/docs/index.php

I've got a very simple Div: 

<div style="background:url(gymBasketballHoops.jpg);height:100%;">&nbsp;</div>

When I set height to 190 px it says 190 no matter the browser size, but when I set height ot 100% it's only show 50 px of image. I use lots of stuff in my current site that is going to be a background image, but i also want those heights responsive. How do i accomplish this?

Upvotes: 0

Views: 2351

Answers (1)

Sparky
Sparky

Reputation: 98718

<div style="background:url(gymBasketballHoops.jpg);height:100%;">&nbsp;</div>

When I set height to 190 px it says 190 no matter the browser size, but when I set height ot 100% it's only show 50 px of image.

Without seeing the rest of your HTML/CSS, I cannot recommend anything further than the following...

190px is a fixed size and will be 190 pixels high no matter what browser or resolution.

100% is the size with respect to the outer container of the div, not its content. If the outer container is 500 pixels high then your <div> will be 100 percent of that.

Since the <div> is empty except for the &nbsp;, you have to set a size or it will only be large enough to enclose the &nbsp; So without a specified size, it will only be responsive to the size of its content.

Therefore, you can set a percentage based upon the outer container, you can set a fixed height, or you can leave it out and allow content to dictate height.

Upvotes: 5

Related Questions