HTML and CSS

Background Image problem

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Sep 2009

Posts: 67

Reputation: Kruptein is an unknown quantity at this point

Solved Threads: 4

Kruptein

Offline

Junior Poster in Training

Background Image problem

Oct 11th, 2009

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.

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
body {
color:#C00;
background-color:#000;
background-image:url('../background.jpg');
background-repeat:no-repeat;
background-position:top;
height:100%;
}
body {
color:#C00;
background-color:#000;
background-image:url('../background.jpg');
background-repeat:no-repeat;
background-position:top;
height:100%;
}

[img]http://wakoopa.com/Kruptein/card.png[/img] -- My web browser game

•

Join Date: May 2009

Posts: 24

Reputation: Traevel is an unknown quantity at this point

Solved Threads: 9

Traevel

Offline

Newbie Poster

Oct 11th, 2009

Hi there,

Could his screen perhaps be bigger?

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

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

6.5 When the answer cannot be put into words, neither can the question be put into words. The riddle does not exist. If a question can be framed at all, it is also possible to answer it. ~ Ludwig Wittgenstein

•

Join Date: Sep 2009

Posts: 67

Reputation: Kruptein is an unknown quantity at this point

Solved Threads: 4

Kruptein

Offline

Junior Poster in Training

Oct 11th, 2009

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

[img]http://wakoopa.com/Kruptein/card.png[/img] -- My web browser game

•

Join Date: May 2009

Posts: 24

Reputation: Traevel is an unknown quantity at this point

Solved Threads: 9

Traevel

Offline

Newbie Poster

Oct 11th, 2009

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

•

Join Date: Sep 2009

Posts: 67

Reputation: Kruptein is an unknown quantity at this point

Solved Threads: 4

Kruptein

Offline

Junior Poster in Training

Oct 11th, 2009

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

[img]http://wakoopa.com/Kruptein/card.png[/img] -- My web browser game

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Oct 11th, 2009

•

Originally Posted by 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.
Help with Code Tags

css Syntax (Toggle Plain Text)
body {
color:#C00;
background-color:#000;
background-image:url('../background.jpg');
background-repeat:no-repeat;
background-position:top;
height:100%;
}
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.

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Oct 20th, 2009

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.

Daylight-saving time uses more gasoline