?
Solved

background image responsive design

Posted on 2013-05-20
6
Medium Priority
?
368 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 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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).
Suggested Courses
Course of the Month13 days, 11 hours left to enroll

750 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