Responsive Background Image

Hello Experts,

I am trying to figure out what would be the best approach (best practice) achieving responsive background image (full screen width).
I looked at different resources and each has a different approach.

In all the resources  no one used the "top and bottom padding" as I am using in the example below. Yet when I remove the padding the background image is gone (apparently the height is unknown).

Also, the example below in not "responsive". Can someone advice/guide me?


#responsive-background-img {
      position: relative;
      width: 100%;
      background-image:url(../images/02.jpg);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 300px 0;

Open in new window

RefaelAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
I use this: http://srobbin.com/jquery-plugins/backstretch/. Do you know it yet?
Julian HansenCommented:
The padding in your solution is what is giving your background a height of 600px - take that away and there is no height so it will either be nothing or 600px. You need to style your container to be maximum height - which means styling body and html to be 100%.

Here is a sample of some code I use for responsive backgrounds.

CSS
html, body {
	height: 100%;
}
#backgrounds {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.slides::after {
  clear: both;
  content: " ";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
#backgrounds .slides {
  height: 100%;
}
.slides {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
#backgrounds .slides li {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
.slides {
  list-style: outside none none;
}

Open in new window

HTML
<div id="backgrounds">
	<ul class="slides">
		<li style="display: list-item; background-image: url(images/1413091-worlds-best-scenery.jpg);"></li>
	</ul>
</div>

Open in new window

Working sample here
http://www.marcorpsa.com/ee/t875.html

You don't have to use a <ul> I use it when I want to have rotating backgrounds or when you have different backgrounds as you scroll the page up.
RefaelAuthor Commented:
Hello Julian, Thanks  :-)

When testing it locally the height of the div is 3/4 of the background image. Do I need to set top and bottom padding as the height of the image? And also this is not really responsive... resize your browser.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

RefaelAuthor Commented:
Oh one comment this dive is not in the header but in a section at the middle of the page.
Julian HansenCommented:
And also this is not really responsive... resize your browser
Yes it is responsive. What were you expecting?
See screen shots
   squareportraitlandscape
Marco GasiFreelancerCommented:
I agree with Julian: its solution works greatly.
Slick812Commented:
greetings Refael, , ,  I am not really understanding what some of your page code is about, and what you need to have in the HTML and the CSS to have an image in the background. I am not clear about the area of your page that this backgroung image will cover, the code as  Julian has is for the backgrond for the ENTIRE page, and if you change it to a portion of the page, then it may not be good there, because it was not set up for that. You say that the <div> you need this to work for is "in a section at the middle of the page", can you show us the page HTML code for that <div> and the other elements around it?, Might help us to understand why this is not workin 4 ya.
Marco GasiFreelancerCommented:
Refael, if you just need to have a div background responsive this could be enough:

#responsive-background-img {
      position: relative;
      width: 100%;
      background-image:url(../images/02.jpg);
//      background-size: cover;
      background-size:100% auto;
      background-position: center center;
      background-repeat: no-repeat;
      padding: 300px 0;
}

Open in new window

Julian HansenCommented:
Sample showing background working inside a section that is in the middle of the page
http://www.marcorpsa.com/ee/t875a.html

The section is styled to be 25% of the height - so it will respond to the change in browser height - this can be further controlled through media queries.

As you can see (@slick) that the styling of the background remains the same - it is all dependent on the container it is put in.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
I think the author is asking how to make it so that the full image is always visible - which is why he was putting padding in there - to compensate for instances where the image was not high enough to cover the entire available area.

Before posting more code though I would like to get confirmation on exactly what it is he is looking for?
Slick812Commented:
Yea, as I said, Refael, , I'm not getting what is needed from your descriptions. I'm especially puzzled by the <div> that needs to be responsive, wid a respon backg, , , ,   is empty with no content and  collapses with no padding. If it's empty, then I might try an use an image inside the <div>, since a <div> is automatically 100% width, you may not need any css on it?
maybe as something like this -
<div>
<img src="topclbg6.jpg" style="width:100%"/>
</div>

Open in new window


which changes the image dimentions when the <div> width change (as resizing the page), But there could be a container for the <div> that is not responsive? and other things for the image dimentions requirements, used as an image or as a background?
You may not even need the <div> as a container for image?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.