Solved

background image responsive design

Posted on 2013-05-20
6
361 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
  • 4
6 Comments
 
LVL 6

Assisted Solution

by:APoPhySpt
APoPhySpt earned 250 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 250 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Overlap photo won't go all the way to the right 1 17
ebay style="image-orientation: 90deg;" 2 36
Looking for magnifying glass wingding font 3 16
Location of Buttons 4 14
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

786 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