CSS background image aligned to left bottom corner without forcing scrollbars

Question

Hi,

i have a simple website: fixed width, variable height, centered. I want a background image to align to the bottom left corner of the content like so:

----------------------------------------------------------
                ____________________________
                |       <- 960px ->        |
                |                          |
                |                          |
                |                          |
                |         Content          |
                |                          |
                |                          |
                |                          |
      ----------|                          |
      |         ____________________________
      | bg-img   |
      |          |
      ------------
----------------------------------------------------------

If the browser window is big enough the whole background image should be visible. If it's smaller, the image should get cut off without forcing horizontal or vertical scrollbars. I don't know how to get the horizontal AND vertical thing right. Any suggestions? Thanks a lot.

Answer 1

Make the image really big and apply it on the body tag so that the image is where you want it. Postion it center left but make it wide enough so that it is positioned correctly e.g. more than 960px but even either side so that it center properly.

Answer 2

In order to get the sizing perfect for different browsers, you can set a background image and then set the left and right margins to auto. This will get your website to auto center as well as allow your background to be cut-off no matter how much the browser is changed.

body {
    background-image: whatever.jpg;
}

maindiv/contentholder {
    margin-left:auto;
    margin-right:auto;
}

Answer 3

Absolutely position the bg-img. Hide overflow created from the image. I'd put it in a and style the div.

Answer 4

Don't put the background on the content div, put it on a child of the content div. Then position that element absolutely:

position: absolute;
left: -100px;
bottom: -100px;

It will also need a width and a height, and the content div will need to be position: relative or absolute. If you need a more thorough example, just say so, and I'll write one out.

As for cutting the image off at the bottom, you might just be out of luck, unless you can guarantee that your content height will be less than the height of the window (which you probably can't).

Answer 5

Thanks for your answers. I think it's not entirely possible. I made a different approach positioning the element absolutely bottom left. It's now in the bottom left corner and gets overlapped by the content-div when the browser-window gets smaller.