0

After a few days of hounding google for an answer, I am hoping some genius out there is able to help me on this tricky problem im having. Overall what I am trying to achieve is a 1 page website with a very large bg image that uses jquery to scroll between each div ( which is effectively the same as a 'page', set to 100% height ).

My problem is..

I have a body background image, that is approx 5000px height.

I have 3 divs that I want each to be 100% height of the browser window.

Thus when scrolling from div to div the body bg is underneath.

I cannot set the BODY to 100% height as that will simply 'cut off' my bg image to the browser height.

I need to keep my bg image in its full length.

Is there any possible way to achieve this?? I read somewhere you can set an ID to your BODY element however Im not sure that would be effective for what im trying to achieve?

I know some one out there has an answer :)

Mush appreciated

leppie
  • 115,091
  • 17
  • 196
  • 297
Stacey
  • 1
  • 1
  • There is a lot of unknowns here for me, could you paste some example code? That way you will have an answer in no time. – Allan Kimmer Jensen Apr 23 '12 at 07:41
  • No worries, my Divs are 100% height, each of them has a menu, images and content. They MUST fit browser window. But the problem is my bg image is very long (approx 5000px) and needs to flow underneath all 3 of these divs. The only way I can make my divs 100% height is if I set the BODY to 100%, however that wont work as it just cuts off my bg image. `
    100% height of browser
    100% height of browser
    100% height of browser
    `     – Stacey Apr 24 '12 at 01:20

1 Answers1

0

I have seen you example code now, and I think i found the problem. You forgot to make the html tag 100% in height, this results in your problem. Try to do like this:

html, body { height: 100%; }

I made a jsFiddle demostation here: http://jsfiddle.net/Allan/Vx9dC/

Allan Kimmer Jensen
  • 4,333
  • 2
  • 31
  • 53
  • wow something so simple, thanks so much! this is exactly what I have been trying to achieve :) – Stacey Apr 25 '12 at 01:46
  • ok i have 1 other question to ask you, what if each of the divs had a top and bottom bg image? but the main body would still need to be on the top. confused much – Stacey Apr 25 '12 at 07:27
  • I am not sure what you want to achieve? Could you illustrate it with a picture? – Allan Kimmer Jensen Apr 25 '12 at 08:59
  • Ok, here is link to my test site [ http://www.stayceepine.com/dev ] . See the purple bg at the top, I want that to be top and bottom bg of each div, and the designy graphic over top in its full height (when its finished being designed 5000px) Does that make sense? – Stacey Apr 26 '12 at 02:02