background image responsive design

Hi friends. I am wondering how I can get a background image to stretch with a responsive design.

Here is the background image -- the Yogi's Ark header image is the background image that I want to stretch:

The container is set to 80% of the page width. The #Head div contains the background image, thus:

#Head	{
background: #fff url(/img/header_chosen.jpg) center top no-repeat;

Open in new window

How can I get that background image to stretch with the responsive design?

Thank you for your advice.

Eric BourlandAsked:
Who is Participating?
WebDevEMConnect With a Mentor Commented:

I think the code you're looking for is to have the background image size itself up to the container:
webkit-background-size: cover;
      moz-background-size: cover;
      o-background-size: cover;
      background-size: cover;

Open in new window

It's not perfect though, I tried it in your site and sometimes the dimensions are enough to cut off the bottom of your logo.

You can also use background-size: 100% with similar results, but a little better depending on your browser.

APoPhySptConnect With a Mentor Commented:
Hi, if you do this, then if the screen is big enough then the image will all streched up aid distorted.

Second, if you want to set a div do the size of the screen, in your case, I'd say you should place the '<div id="Head">' ouside of the '<div class="grid">' cuz even though you set your head to 100% since #head in containerd in #grid the width is related to it's parent.
Eric BourlandAuthor Commented:
Friends, thank you. I am going to try these solutions and present them to the client. I am working on these today and will get back to you. Eric
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Eric BourlandAuthor Commented:
Hi. I am trying the ideas noted above. WebDevEM, I used your suggested CSS, and indeed the background header image is cut off at the bottom. APoPhySpt -- I did indeed move the Head area up and out of the Grid area. I see what you mean.

Question: how would you handle this situation? What would you do with this background image in the header area? I need to place images and a FORM field on top of this background image. In that right-side area with the wood panel background I need to place social media icons, and a search form field.

That indicates that the image needs to be a consistent size -- 1020px wide, for example. Yet the client expects a flexible, responsive design.

What would you do?

Thank you for your advice.

Eric BourlandAuthor Commented:
I think I am satisfied with the way the header background image scales now. It shrinks and expands with screen size. I set the max-width of the grid to max-width:1020px; and that seems to work.

I have one more question about flexible images. See the "ark" image in the footer of this page?

That image does not flex. Do I set a size for the image that is a percentage, rather than a fixed pixel value?

Thank you again, friends.

Eric BourlandAuthor Commented:
Friends, thank you so much for your help. The background header image seems to flex as the screen expands or shrinks. I really appreciate your time and expertise. Take care and have a safe weekend.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.