CSS Background Tile in FireFox not working

HTML & CSS
1

I’m stumped on this and spent hours on it already. I am trying to tile a background image from left bottom, with repeat-x.

The code below:

  • works in IE
  • works in Safari
  • works in FireFox ONLY when the DocType is not included and height:100% IS included.

I have tried numerous different docTypes, but none of them work. In firefox, the tile is only shown at the top of the page. If I use height:100% then it works in firefox.

The problem is I am not able to ommit the doctype and using height:100% has a problem in that it forces a scroll bar to show even when not needed (because the body also has some padding).

But there most be a way to do this in FF?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>

<style>
body{
    background-image: url(lightbluefade.jpg);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-color:#FFFFFF;
	height:100%
}
</style>
</head>

<body>
</body>
</html>
2

Hi,

You need to set html to min-height:100% only and remove the margin and padding from html and body also


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<style>
html {
	margin:0;
	padding:0;
	min-height:100%;
}

body { 
background:#fff url(lightbluefade.jpg) repeat-x 0 100%;
margin:0;
padding:0
 }
</style>
</head>

<body>
</body>
</html>

That will put the gradient at the botttom of the viewport or at the bottom of the document if longer.

If you want the gradient always at the bottom of the viewport them use background-attachment:fixed as well.

If you use height:100% on the body then the image will be placed at the bottom of the viewport but scroll away when content exceeds the viewport height. Therefore use min-height:100% on the html instead.

3

Hi,
actually, all the browsers I’ve tested in just now (Firefox, Chrome and Opera) have the problem you describe.

It’s a tricky one. Here’s what’s happening:

Normally if you had just done this:
body{
background: #fff url(lightbluefade.jpg) 0 0 repeat-x;
}

it would have filled the screen. Not because the body is actually that big, but because of this rule in the specs:

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML “HTML” element or an XHTML “html” element that has computed values of ‘transparent’ for ‘background-color’ and ‘none’ for ‘background-image’, user agents must instead use the computed value of the background properties from that element’s first HTML “BODY” element or XHTML “body” element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

Meaning, if you leave your background-position to 0 0 (or don’t mention it at all, which defaults to 0 0), your image actually gets placed on the HTML element itself, and the HTML element is always the full screen.

The body is not always the full screen. Like other boxes, it’s as tall as the content inside makes it (height: auto).

Because you want the image to start at the bottom of the body, you used
0 100% or left bottom

and I don’t know why, but apparently setting this means the image doesn’t get painted on the HTML element, but stays on the body… and the body isn’t tall enough (you have it completely empty right now).

You can do one of three things:
You could give the body a min-height of 852px. But this will cause a scrollbar for any pages whose content isn’t that tall, as you’ve said, so I guess you don’t want that.

Another option is to write your colours differently: let the image start at the top of the body, and set the background colour to the blue (#9cf). However, this means your body background is always blue and contrast issues may crop up esp if the image doesn’t render for some reason.

Last, if you really need to use an image this large and really have pages not all at least 852px tall and don’t want a scrollbar then this may be the one case where you need to put the image on the html element. Normally, you wouldn’t.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Background tile</title>
    <style>
  html {
    height: 100%;
    background: #fff url(lightbluefade.jpg) 0 100% repeat-x;
}
body {
  padding: 0;
  background-color: #fff;
}
    </style>
  </head>
  <body>
    <p>Hi</p>
  </body>
</html>

The background-color: #fff on the body is just to show you where the body actually is.

On my computer, the above code looks like all blue, because my viewport isn’t as tall as that image. If I fullscreen it, it’s definitely blue at the bottom and goes to white as I near the top.

So this might still cause contrast issues. All your smaller pages will be blue, and all your longer pages will start out white. Might be confusing.