Question

Here’s a link to what I’ll be referring to.

I’m having some trouble getting the background image to work the way I’d like it to.

I want the background to auto resize based on the width of the window, which it is already doing correctly. If you make your window smaller you’ll see the background shrink with it.

Here’s the issue. If you make your window wide (short) then the background will resize and go too high so you can’t see the top of the background anymore (since the background is bottom positioned).
I want the background to be top position when you are at the top of the page, and as you scroll down it will slowly move to be bottom positioned. Sort of like the effect of an Android phone’s background when you move left and right. Of course, keep in mind that I still want the background to auto-resize when you make the window smaller.

html {
  background-color: #70d4e3;
  height: 100%;
}

body {
  height: 100%;
}

.background {
  margin-top: 45px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -9999;
}

.banner {
  margin: 0px auto;
  width: 991px;
  margin-bottom: -9px;
}

.content {
  background: url("http://i.imgur.com/daRJl.png") no-repeat scroll center center transparent;
  height: 889px;
  margin: 0 auto;
  width: 869px;
}

.innerContent {
  padding: 30px;
}

<img src="http://i.imgur.com/6d5Cm.jpg" alt="" class="background" />

<div class="banner">
  <img src="http://i.imgur.com/JptsZ.jpg" alt="" />
</div>
<div class="content">
  <div class="innerContent">
    testing
  </div>
</div>

Maybe some javascript or jquery would be needed to achieve this.

Answer 1

Well, this was fun, thanks!

I hope you don’t mind me taking the liberty to use percentages to make my life a little bit easier and possibly the script slightly more robust since I can reliably use floats with percentages.

What I did is make the layout, html and css comply with the rules you need for the bg to be animated properly, they stayed largely the same from what you had.

Then it was just a question of figuring out the calculations needed with the right properties to figure out the percentage you were from the top, the *20 is actually the amount of space ‘left’ to fill by the background image in percentages (as the background height is 80%).

They I moved the calculations to a function so I could call that on scroll and on window resize, making sure it’s initiated on any event that modifies the window somehow…

Didn’t do extensive testing but it worked in Chrome and I’m tired :p

I believe this is what you are looking for:

http://jsfiddle.net/sg3s/RSqrw/15/ See edit 2

If you wanted this the other way arround just make the page background start at the top and modify that:

http://jsfiddle.net/sg3s/RSqrw/14/ See edit 2

Edit:

As a bonus, and since I had never actually written jquery script as a ‘plugin’, I decided to convert this into one. What I came up with should be easy to implement and use!

http://jsfiddle.net/sg3s/RSqrw/52/ See Edit 3

Functionality successfully tested in Chrome, Firefox 3.6, IE9 + compatibility mode

Edit 2:

Reading the question again checking if I did it right I noticed I didn’t quite do what you want, so I updated the link in the first edit which gives you a plugin in which you can have several options for the scrolling background. It retains my ‘old’ interpetation while also doing what you want… Read comments in code for some extra descriptions.

Edit 3:

As I went to work today I was bothered with the fact that my plugin ‘try’ was a little bloated. And as you mentioned in the comment it didn’t quite fit the requirements.

So I rewrote it to only do what you want and not much more, tested in Chrome Firefox, IE9 +compat etc etc.. This script is a lot cleaner.

http://jsfiddle.net/sg3s/vZxHW/

You can chose to make the background stick to the top or bottom if the height fits in the window. Nothing else, but that is already more than enough to do some pretty cool stuff :p