Home/ Questions/Q 148503
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T08:58:13+00:00

I am trying to create a CSS layout where the page looks like it’s

  • 0

I am trying to create a CSS layout where the page looks like it’s in the middle of the forest. There is a left and right div with the background trees, some header divs that show the top of the page with various wildlife, and some footer divs that show the bottom with more wildlife that matches up with the left and right div background images, all of which is positioned using ‘position: fixed’ in CSS.

Then there is content in the middle that is positioned normally and scrollable. That all works fine.

The problem I’m having is that the background forest layout is fixed at 1204×768 but of course some web browser windows may not be that large. Unfortunately while the content will scroll as intended, the fixed position elements will never be shown if they are outside the size of the browser window. Clearly not acceptable.

I’ve tried setting overflow: scroll and height: 768 on the .body and .html elements in the stylesheet but no luck.

Note that I am positioning everything with top: and left: values in the CSS. I know I could get around this by using bottom: and right: but the problem is that the footer images wouldn’t line up.

This may just not be possible in which case I’ll have to rework the graphic design, but if it is possible I’d love to know how!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. of course some web browser windows may not be that large

    Or indeed that small! The likelihood of the browser window actually being exactly the right size to put your decorations on the edges is quite small; that’s always the problem with fixed layout.

    I know I could get around this by using bottom: and right: but the problem is that the footer images wouldn’t line up.

    Yes, designing images that can alter their joins in response to page size changes is more work, but it’s doable. You would have to export the ‘bird+foliage’ layer and the ‘squirrel+foliage’ layer as standalone transparent images, then lay them over the top of a longer side image.

    To make the object edges nice and smooth would require PNG’s 8-bit transparency, which would necessitate a PNG-rendering hack for IE6. Not the end of the world though.

    Unfortunately while the content will scroll as intended, the fixed position elements will never be shown

    Is that a problem? They are only decorational in nature.

    I’ve tried setting overflow: scroll and height: 768 on the .body and .html elements

    For this approach you would need to set ‘overflow: auto; height: 768px;’ on a wrapper <div> which holds both your #sidebar-left and your #content.

    • 0