CODEWITHSUNDEEP
cssresponsive-designbackground-image
user2090411
user2090411

Reputation: 31

Responsive Web Design for Background-Image

I've found StackOverflow extremely useful so thanks for any help in advance.

On http://test2.heyscout.com/, I'm wondering how to properly set up my background-image in my "hero div" for responsive web design. I've been playing around with numerous settings but I'd like it to:

What is the best practice for keeping the "hero div" in check? I'd surmise it'd have to do something with the min-height or perhaps fixing the dimensions of the actual image. Should I set the height of the hero div in percentage rather than pixels?

Also any advice on how to keep my "trimester div" fill up nicely the bottom 1/3 of the page consistently would be great- I'd imagine when the height of the browser is bigger than expected, it'd look strange. I've read that it's best to keep the height attribute alone for RWD but I'm wondering if there are any tricks to make sure it resizes properly.

Upvotes: 0

Views: 4061

Answers (3)

turtledifference
turtledifference

Reputation: 35

give

background-size:contain;

and this may solve your problem, because it will auto adjust size by contain!

Upvotes: 0

mwcz
mwcz

Reputation: 9301

To get the background image to always fill the div, use background-size: cover2 unless you need to support IE8.

If your font size doesn't look right across pc/tablet/handheld, try using media queries to set font sizes for specific resolutions.

I'm not sure how to help you with your button "looking strange", except to offer profuse sympathy.

In the future, try to keep your questions more focused. :)

Upvotes: 1

Tom Wahlin
Tom Wahlin

Reputation: 137

Have you looked into Media Queries? Basically, they allow you to set specific CSS based on browser width (and height). This will allow you to control how your page looks at specific browser sizes.

Example - CSS at different widths:

@media screen and (max-width: 600px) {
  /* add some CSS here for 600px maximum width*/
}

@media screen and (max-width: 960px) {
  /* add some CSS here for 960px maximum width*/
}

Upvotes: 1

Related Questions