• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 373
  • Last Modified:

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:

http://test2.ebwebwork.com/pages/Home.cfm

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

#Head	{
clear:both;
width:100%;
height:163px;
margin:0;
padding:0;
border:none;
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
0
Eric Bourland
Asked:
Eric Bourland
  • 4
2 Solutions
 
APoPhySptCommented:
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.
0
 
WebDevEMCommented:
Hi,

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.

WebDevEM
0
 
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
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
0
 
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?

http://test2.ebwebwork.com/

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
0
 
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.

Eric
0
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now