Member Avatar for 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%;
}
  • 4 Contributors
  • 6 Replies
  • 125 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Quick diagnosis and a practical fix

What you’re seeing is exactly the normal result when a fixed bitmap isn’t large enough to cover taller viewports: with no-repeat the page background color shows through below the image. supplied the image size (1090×587), already pointed out the no-repeat consequence, and rightly reminded that screen sizes and aspect ratios vary.

A reliable modern solution is to let the browser scale the image to cover the viewport while preserving aspect ratio. This will enlarge and crop the image as needed instead of leaving a gap:

body {
  background: url('background.jpg') no-repeat center center;
  background-size: cover;
  background-color: #000;
}

background-size: cover is supported in all current browsers; it scales the image so the viewport is filled and crops whichever edges exceed the viewport. If keeping the whole image visible is more important than filling the screen, use background-size: contain (it will leave background bars).

Performance and compatibility tips

  • Compress the image (resize to the largest expected display and use optimized JPEG/WebP) because cover doesn’t change file size.
  • Use media queries to serve larger or smaller background files to different viewport widths rather than one huge file for everyone.
  • For debugging, open Firefox’s Inspector -> Computed Styles to verify the effective background-size and background-position. Also check for other rules that might override your CSS.
  • If you must support very old browsers, treat the CSS3 scaling as progressive enhancement and provide a reasonable fallback (a solid color or a repeatable edge tile).

References: MDN — background-size and Can I Use — background-size.

Recommended Answers

All 6 Replies

Member Avatar for 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

Member Avatar for 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

Member Avatar for 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 might help.

Traevel

Member Avatar for Kruptein

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

Member Avatar for 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');
}
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.