Background Image problem

[Kruptein]

In my browser(opera), my background image takes up the full height off the screen, but on my friends(firefox) there appears a large black banner beneath it (black because that is the bgcolor)

I give you the css hopefully you guys can help me.

body {
color:#C00;
background-color:#000;
background-image:url('../background.jpg');
background-repeat:no-repeat;
background-position:top;
height:100%;
}

[Traevel]

Hi there,

Could his screen perhaps be bigger? :D

You're using background-repeat:no-repeat; so perhaps his background ran out of image and showed the color black instead. :P

If you'd like to repeat the image vertically use background-repeat:repeat-y; If that's not it, could you mention the size of the background image in pixels?

Good luck,

Traevel

[Kruptein]

No I don't want the image to be vertically repeated because this would have a verry ugly effect (it's an image, not a pattern)
I want the image to be stretched vertically is this possible?

image = 1090x587

[Traevel]

With a height of 587 it's not that weird to run out of image...

Stretching a background image is only supported in CSS3.

Perhaps this might help.

Traevel

[Kruptein]

Yes i did that first, but it uses so many of my web speed, but I will give it a second try...

[Troy III]

In my browser(opera), my background image takes up the full height off the screen, but on my friends(firefox) there appears a large black banner beneath it (black because that is the bgcolor)

I give you the css hopefully you guys can help me.

body {
color:#C00;
background-color:#000;
background-image:url('../background.jpg');
background-repeat:no-repeat;
background-position:top;
height:100%;
}

this will make your background image to fill the available space of the document, in Opera Safari and IE5.5 and up...,but I can't help you with firefox. You'll need to hack it.

html, body {
  height: 100%; Width: 100%;
  margin: 0;  padding: 0;  border: 0;
  background-image: url(background.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100%;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.png',sizingMethod='scale');
}

[MidiMagic]

You are never going to exactly fill a screen with an image. There are too many differences in screen resolution, aspect ratio, and browser configurations among different computers for you to expect it to work.