Challenge: Image position relative, expand width

[liv]

Hello,

I hope I’m posting this in the right area of the forum. I’ve came with a slight little problem, but one that I’ve been working for many hours and couldn’t find a solution so far. Maybe I can find it here, or at least a hint.

The problem:

I have a background image (background-image) that I position inside a certain div (container). But I want that background image to be fixed regardless of resolution and/or resizing browser window. I don’t want it to be static or anything else. Just to be inside the container to position it relative to the container.

The container has a width of 850px. Height is dynamic. The background-image is variable (today it can be 800×1200, tomorrow 900×500). The image is bigger than the container and I want to show the full image, without adding scrollbar to body.

I can’t position the background-image outside the container. This will mean to add the background-image to the body of webpage – Thus, resulting in the image to change accordinally when resizing/resolutions.

What I want to achieve:

Position the background-image inside the container to control it’s top/left. Since the width is dynamic, let the image show between the dimensions of the browser window (from left to right)

The scrollbar should appear if the window is lower than the container.

Currently the background-image is fully displayed, but it creates a horizontal scrollbar since I’m moving the image with right:-203px;

The example:

[img]http://img29.imageshack.us/img29/9954/56251737.png[/img]

The code is something like this:

Code:

#container { width:850px; }
#container #background-image { position:absolute; z-index:-1; top:20px; right:-200px; width:100%; height:100%; background-image:url(); }

Code:

Content goes here

I hope somebody understands :)

Thank you,
– Liv.

[Author]

Posts