CSS, Fixed background is repeating in Firefox.

**TSSPat** · 12-15-2007, 05:32 PM

hello everyone.
just building a website for my restaurant,
and it so happens that my "fixed" background seems to be repeating in Firefox.

The image is located on the "Map" page which is loaded into the main iframe on the index page.

now the website is http://threeanchors.ca.

the code for the "Map" page is as follows:

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map</title>

<style type="text/css">
body 
{
background-image: 
url(http://www.threeanchors.ca/graphics/index/index_r3_c4.jpg);
background-repeat: 
no-repeat;
background-attachment: 
fixed
}
</style>

<link href="../threeanchorscss.css" rel="stylesheet" type="text/css" />
</head>



<body leftmargin="0" topmargin="0" bgproperties="fixed" marginwidth="0" marginheight="0">
<div align="center">
  <p><iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=145+davis+st+sarnia+ontario&amp;sll=37.0625,-95.677068&amp;sspn=46.630055,117.421875&amp;ie=UTF8&amp;ll=42.978467,-82.402611&amp;spn=0.005291,0.014334&amp;z=14&amp;iwloc=addr&amp;om=1&amp;output=embed&amp;s=AARTsJpnUm4JT86aZmj-VBU-VEaTGIKzdg"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=145+davis+st+sarnia+ontario&amp;sll=37.0625,-95.677068&amp;sspn=46.630055,117.421875&amp;ie=UTF8&amp;ll=42.978467,-82.402611&amp;spn=0.005291,0.014334&amp;z=14&amp;iwloc=addr&amp;om=1&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
  <p></div>
</body>
</html>

now ive ran this code through a CSS validator and it says its correct. any ideas why thin isnt working? thanks

Pat.

**WebJoel** · 12-15-2007, 05:47 PM

body
{background: url(http://www.threeanchors.ca/graphics/...dex_r3_c4.jpg) no-repeat fixed}

Try this. Exactly as written. This should work.

**ray326** · 12-15-2007, 11:44 PM

http://validator.w3.org/check?verbos...eanchors.ca%2F

**TSSPat** · 12-16-2007, 10:13 AM

Originally Posted by WebJoel

Try this. Exactly as written. This should work.

Unfortunately writing this code in made the background image dissapear all together.

Also all of those "errors" in the HTML validation were coding inputted by Dreamweaver cs3's "input flash media" coding. so although they are "errors" thats not my main problem right now. but thanks!

blah any other idea?

**WebJoel** · 12-16-2007, 02:44 PM

I'm still trying to figure out what you are trying to do here...

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map</title>
<style type="text/css">
* {margin:0; padding:0;}
body {background: #fff url(http://www.threeanchors.ca/graphics/index/index_r3_c4.jpg) no-repeat fixed;}
</style>

<link href="http://threeanchors.ca/threeanchorscss.css" rel="stylesheet" type="text/css" />
<base href="http://threeanchors.ca/" />
</head>

<body>
<div align="center">

<iframe scrolling="no" style="width:400px; height:300px; margin:0 auto;" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=145+davis+st+sarnia+ontario&amp;sll=37.0625,-95.677068&amp;sspn=46.630055,117.421875&amp;ie=UTF8&amp;ll=42.978467,-82.402611&amp;spn=0.005291,0.014334&amp;z=14&amp;iwloc=addr&amp;om=1&amp;output=embed&amp;s=AARTsJpnUm4JT86aZmj-VBU-VEaTGIKzdg">
</iframe>
<br />
<small><a  href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=145+davis+st+sarnia+ontario&amp;sll=37.0625,-95.677068&amp;sspn=46.630055,117.421875&amp;ie=UTF8&amp;ll=42.978467,-82.402611&amp;spn=0.005291,0.014334&amp;z=14&amp;iwloc=addr&amp;om=1&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

</div>
</body>
</html>

I made some changes but not knowing what you are trying to do, these probably aren't what you're after...
You may have to actually sketch a picture for me to understand your intent..

**TSSPat** · 12-16-2007, 04:41 PM

thank you Joel,

that did exactly what i was wanting! happy holidays to you and everyone else on this amazing webforum and thanks to everyone who helped out, i know ill be back to give help where possible.

Pat.

**WebJoel** · 12-16-2007, 05:41 PM

Great.

-Note that I used the "universal selector" method, * {margin:0; padding:0;}
This strips ALL default margins and paddings, from every element that can be on a web page. Advantage here is that you do not need to state "margin:0;" or "padding:0;" on any other selector now... I noticed that several selectors had either margin:0, padding:0;, or both.
This saves you time in writing, and makes the page-weight smaller (less code). And it is a good first step towards making your pages look the same in IE, as they would look in any other browser.

..and yes, -this is an amazing web forum!

Thread: CSS, Fixed background is repeating in Firefox.

Thread Tools

Display

CSS, Fixed background is repeating in Firefox.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions