[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

background image responsive design

Posted on 2013-05-20
6
Medium Priority
?
367 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

656 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