background-position in Firefox

Forum Moderators: not2easy

Message Too Old, No Replies

background-position in Firefox

gentoolicious

8:54 pm on Jul 28, 2006 (gmt 0)

I spent awhile searching Google for a solution to this problem but couldn't come up with a definate answer.

I am trying to align an image to the bottom center of a page. The code works fine with IE, but with Firefox it doesn't. The image appears only partially visible at the top of the page, rather completely visable along the bottom.

CSS


body { 
 background-image: 
 url('gradient.png');
 background-repeat: repeat-x;
 background-position: bottom center; 
 }

HTML


<html>
<head>
<title>gradient test</title>
<LINK REL=StyleSheet HREF="blah.css" TYPE="text/css" MEDIA=screen>
</head>
<body>
</body>
</html>

Fotiman

9:10 pm on Jul 28, 2006 (gmt 0)

You need to specify a height of 100%.

gentoolicious

9:47 pm on Jul 28, 2006 (gmt 0)

Alright, that worked, thanks. I have a new problem, though.

I want to position another image on top of the gradient I created at the bottom. It needs to be aligned with the absolute bottom of the page, and the absolute right, however when I try this there is some border space around the image and a scroll bar appears to the left.

CSS:


body { 
 background-color: fcfcfe;
 background-image: url('gradient.png');
 background-repeat: repeat-x;
 background-position: bottom center;
 background-attachment: fixed;
 height:100%; 
 }div {
 background-image:url("thing.png");
 background-repeat:no-repeat;
 background-position: 0% 100%;
 background-attachment: fixed;
 height:100%;
 }span {display:none;}

HTML:


<html>
<head>
<title>gradient test</title>
<LINK REL=StyleSheet HREF="blah.css" TYPE="text/css" MEDIA=screen>
</head>
<body>
<div>
 <span>blah</span>
</div>
</body>
</html>

[edited by: jatar_k at 3:23 pm (utc) on July 29, 2006]
[edit reason]
[1][edit reason] no urls thanks [/edit] [/edit][/1]

Fotiman

10:28 pm on Jul 28, 2006 (gmt 0)

You need to add margin:0 to body. You should probably also add padding:0 to body.

PS-URL posting is not permitted. See the TOS link at the bottom of this page.

gentoolicious

10:34 pm on Jul 28, 2006 (gmt 0)

Thanks for the tips, however simple they may be. I'll keep in mind not to link to things in the future.

The scroll bar still appears in IE, btw. How can I remove it?

Fotiman

1:46 pm on Jul 31, 2006 (gmt 0)

If IE is displaying a scrollbar, it's probably in "quirks mode", using it's own box model instead of the standard. Make sure your document has a full DOCTYPE on the first line like so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">