Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 1156

Oct 11th, 2009

Background Image problem

Expand Post »

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.

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%;
}

Similar Threads

Background Image Problem in HTML and CSS
Setting a Background Image problem in PHP
css background image problem in HTML and CSS

Kruptein

Reputation Points: 25

Solved Threads: 11

Posting Whiz in Training

Offline

258 posts
since Sep 2009

Permalink

Oct 11th, 2009

Re: Background Image problem

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

Traevel

Reputation Points: 16

Solved Threads: 16

Light Poster

Offline

38 posts
since May 2009

Permalink

Oct 11th, 2009

Re: Background Image problem

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

Kruptein

Reputation Points: 25

Solved Threads: 11

Posting Whiz in Training

Offline

258 posts
since Sep 2009

Permalink

Oct 11th, 2009

Re: Background Image problem

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

Traevel

Reputation Points: 16

Solved Threads: 16

Light Poster

Offline

38 posts
since May 2009

Permalink

Oct 11th, 2009

Re: Background Image problem

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

Kruptein

Reputation Points: 25

Solved Threads: 11

Posting Whiz in Training

Offline

258 posts
since Sep 2009

Permalink

Oct 11th, 2009

Re: Background Image problem

Click to Expand / Collapse Quote 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.
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.

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

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

513 posts
since Jun 2008

Permalink

Oct 20th, 2009

Re: Background Image problem

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: dropdown menu, not working in IE6

Next Thread in HTML and CSS Forum Timeline: How important are robots.txt file?

DaniWeb Message

Cancel Changes

User Name
Password