I have a container that is 980 pixels wide. I want a background of the main page (the body) to start from the right of the container and continue as far right as the browser window goes, or until the image ends (whichever is sooner).
It I position the background image like this:
Then the background image will start 980 pixels from the left hand edge of the browser window but that means it will only work on one particular screen resolution.
I tired positioning an element with the background but that went off the edge of the screen and when I tried to hide the overflow, but that meant you couldn't scroll the main page to see the content on the low resolution or high zoom.
Is there a way to take the centre and then add 490 pixels to it so it will start from the end of the container?
It I position the background image like this:
Code:
body { margin: 0; font-size: 10pt; line-height: 1.4em; text-align: center; background: url(images/image.jpg) no-repeat 980px top; }
I tired positioning an element with the background but that went off the edge of the screen and when I tried to hide the overflow, but that meant you couldn't scroll the main page to see the content on the low resolution or high zoom.
Is there a way to take the centre and then add 490 pixels to it so it will start from the end of the container?
Comment