0

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%;
}
4
Contributors
6
Replies
7
Views
7 Years
Discussion Span
Last Post by MidiMagic
0

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

0

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

0

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

0

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

0

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');
}
0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.