Im building my first parallax scrolling website and I would like some help.

 

We have a really complex background with roads joining, buildings etc...

 

What is the best way to do this?

 

I have tried using:

 

{

background: url(images/bg.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

 

to make it the perfect full page background. On large screens its brillaint but on smaller screen resolutions you lose alot of the detail as its all off the screen, so what is the best way?

 

The background size is 2000px by 6367px.

 

Many thanks!

 

J

An alternative might be to use an img src, not a background-image, and style with

#background {
   position: fixed;
   width: 100%;
   top: 0;    
   left: 0;
   right: 0;
   z-index: -1;

which will adjust to different viewport widths.

Thanks for the reply, but this didn't work. It didnt show the complete height of the image or the width.

 

Cheers though.

Well, my code should adjust to the width, (I use the code myself), but the height is in proportion to the width with my code, so the height in your case would exceed the viewport height in most cases because it's a very high image.

 

If you fix the height to the viewport, the image will get distorted.

 

Here's an example http://www.wickham43.net/backgroundfullwidthflexible.html