?
Solved

background image responsive design

Posted on 2013-05-20
6
Medium Priority
?
366 Views
Last Modified: 2013-05-23
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
Comment
Question by:Eric Bourland
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
6 Comments
 
LVL 6

Assisted Solution

by:APoPhySpt
APoPhySpt earned 1000 total points
ID: 39183840
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
 
LVL 9

Accepted Solution

by:
WebDevEM earned 1000 total points
ID: 39184161
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39184554
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Author Comment

by:Eric Bourland
ID: 39188762
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39190692
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
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 39192821
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month8 days, 18 hours left to enroll

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question