Question

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

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.