jquery backstretch background image with FF/IE

Question

I've a simple page structure with one big image as background for a "work in progress" page.

The problem is that on a 1152x864 resolution with Firefox the background image is "truncated", while with Internet Explorer (and the same resolution) everything seems to work fine.

The sense of "truncated" is that the logo and, in particular, the "creative photographer" phrase, seems to be very very close to the left side of the monitor.

With other screens resolutions (1200x800, 800x600) also the image appears fine for me!

The website is public and is http://www.antoniafiore.com

Am I wrong with something? Could you suggest me where I'm wrong?

Thanks for any reply!

Here there are some screenshots

• Firefox with command bar (good): http://bit.ly/SKser1
• Firefox without command bar (bad): http://bit.ly/QFPCIk
• IE with command bar (good): http://bit.ly/Q2m8Ub
• IE without command bar (bad): http://bit.ly/VxGgD4

Answer 1

If you can use CSS 3, I'd recommend applying a style like this to your background:

div#bg
{
    background-image: url('bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

This will make sure that your image is scaled properly no matter what the current screen resolution. I use this for displaying high resolution images on my website that I don't want scaled or chopped incorrectly.

The background-size property is specific to CSS 3 but the rest is compliant with CSS 2. Also, you don't need to use jQuery for this. It can be done with straight CSS 3.