View Full Version : Background-image position problem in FF1.5

12-15-2005, 04:25 PM
Ok, this is really bothering me. Hopefully someone can help me out.

I have a really simple layout like this:

<div id="wrapper">
<div id="top">
<!-- Links -->
<div id="bottom">
<!-- Content -->
My CSS for #wrapper and #top:

#wrapper {
margin: 5px;
padding: 0;
width: 770px;
background-color: #000;
#top {
margin: 0;
padding-left: 30px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
/* width: 740px; - this doesn't change anything */
color: #000;
background: #F1F1F1 url("images/home-logo.gif") no-repeat fixed top right;
Why, oh why, is the background image not staying within the top div container and positioning itself relative to the body of the page in FireFox 1.5? In IE6, it's perfect. It's set on putting the image at the top right of the page rather than the top right of the div container in Firefox 1.5. I thought IE was suppose to be the one bad with rendering CSS :confused: I'm probably just way off here, so hopefully someone else has some insight.


12-15-2005, 05:15 PM
Well, since it wouldn't play nice, I decided to float a div with an image tag with the logo and it works for both. So that is my solution for now.

Also, I tried setting the width of the html and body to 780px but the image still goes outside that width. It seems that the image will not only overflow its own container, but it will also not adhere to width properties. I only have Firefox1.5 and IE6 to test this, and so far, the problem is only FF1.5, whereas no matter what changes I make, IE6 agrees with me.


12-15-2005, 06:37 PM
background-attachment:fixed; on elements other than <body> should be avoided, as IE does not support it.
It doesn't sound like you want background-attachment:fixed; as you are saying that IE is working perfectly, change to:

background: #F1F1F1 url("images/home-logo.gif") no-repeat top right;

12-15-2005, 08:17 PM
Ah ha! That works perfectly. I thought that the value 'fixed' just meant that it would not be scrolling when using the scrollbar. Getting rid of that made it do what I wanted. Thanks!

I think I'll now use that since I think it's a safer approach than floating a div container with the image.

Thanks again.