Wednesday, June 20, 2007

Making a Background Image Visible in Firefox

I have had a frequent and regular problem with making my background images show up in Firefox. I do a search for "background image won't display in Firefox" and find that others too have the problem. Oddly enough this search has not yielded information that actually helped me to fix the problem. So I had to scratch and think.

After much trial and error, I have figured it out. Here is what I did. I made the following change.

This did not work:

#siteName{
background-color: transparent;
background-image: url(http://www.sitename.com/images/logo.png);
background-attachment: fixed;
background-repeat: no-repeat;
height: 120px;
margin: 0px;
padding: 0px 0px 10px 160px;
}
This however, did:
#siteName{
background-color: transparent;
background-image: url(http://www.sitename.com/images/logo.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 0% 2%;
height: 120px;
margin: 0px;
padding: 0px 0px 10px 160px;
}

I was aided in my search by simply studying the CSS requirements for background positioning. For some reason, the image position in Firefox was outside the containing element, unless I specifically established the position. This information and some nifty positioning tools can be found at: http://www.w3schools.com/css/pr_background-position.asp

0 Comments:

Post a Comment

<< Home