Question

I have a website that I’m making that needs a background resizer. Currently, I use Supersized for sites like this. But this site is unique. The problem with Supersized is that it is always resized to the full screen, and is a fixed background.

I’m looking to make a background image that resizes to the browser, but doesn’t necessarily fill it.

For example, if I have a picture that is 600px x 600px, I want it to resize on a website whose browser is 1200px wide to now be 1200px x 1200px. Even if the website’s height is 1800px (with scrolling). And that it stays to the top of the page(absolute positioned, not fixed). So 1200px height of the site would be the picture and the remaining 600px at the bottom of the site would be whatever the body’s background style is set to.

Is this possible?

Answer 1

I believe what you are looking for is the css3 property background-size. Assuming you want to set the background image to a div, you will need to make that div’s width and background-size 100%, and set the background-image to no-repeat:

#background_image {
    width: 100%;
    background: url('path/to/image.jpg') no-repeat red;
    background-size: 100%;
}​

Take a look: http://jsfiddle.net/PgnvQ/