1

So I have this website that has a large image as the background. Now instead of fading the image of to a flat colour or pattern, I needed it to scale to 100% of the viewport width.

This doesn't solve the problem that you'd only be able to see a portion of the image (depending on the browser size) and I need to have the whole image viewable. Just scrolling down won't suffice because then the image would end and what ever colour I chose for the background would appear (this is bad).

So I was thinking what if I could have

  • the background image scale to 100% of the width of the viewport with a minimum size of the image width and
  • also animate vertically down on scroll until
  • you reach the end of the image height, which it will then stop until you scroll back up and it resumes to the top of the image,
  • with a parallax effect.

Having each of these separately is easy enough but I haven't been able to find a combination of them and with a modification to limit vertical scrolling. If someone can point me in the right direction I would be ever-so grateful. :D

Community
  • 1
  • 1
Jarryd
  • 77
  • 1
  • 8
  • I can imagine this kind of implementation to be a confusing experience for users (background scrolling, then stopping, while content continues to scroll). I'd say a [simple option](http://paulmason.name/media/demos/full-screen-background-image/) would suffice, but that's just my 2c. – Christian Mar 20 '12 at 06:01
  • I know exactly what you mean, the content itself isn't going to be sitting over the top of the background, it's going to be in it's own container which is the focus...so hopefully it won't have any effect in confusing the user. Thanks for the link though! It's close as well :) – Jarryd Mar 20 '12 at 07:06

1 Answers1

0

I've created a working demo of the effect you've described at jsFiddle: http://jsfiddle.net/qqW3G/ (Note: I've given the image a 200% height to ensure that it spans the window height sufficiently for demonstration purposes. You'll want to remove this to avoid skewing your image.)

EDIT: Another option you might consider is a parallax scrolling effect, in which the body content scrolls faster than the background image, creating the illusion of depth. Here's an example: http://jsfiddle.net/qPF2G/

Aaron
  • 5,137
  • 1
  • 18
  • 20
  • It wasn't working for me initially but I figured out it was because I had `html { height: 100%; }`, simply removed it and voilà! – Jarryd Mar 20 '12 at 07:36
  • If the #bg_img container is set to 100% height the image scrolls above the end of the browser. Bah! – Jarryd Mar 22 '12 at 00:55
  • Can you show me your code or a link? This will give me a better idea of what you're trying to accomplish. – Aaron Mar 22 '12 at 05:32