/    Sign up×
Community /Pin to ProfileBookmark

CSS, Fixed background is repeating in Firefox.

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 [URL=”http://threeanchors.ca”]http://threeanchors.ca[/URL].

the code for the “Map” page is as follows:

[code=html]<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>[/code]

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

Pat.

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelDec 15.2007 — body

{background: url(http://www.threeanchors.ca/graphics/index/index_r3_c4.jpg) [B]no-repeat fixed[/B]}[/QUOTE]
Try this. Exactly as written. This should work.
Copy linkTweet thisAlerts:
@TSSPatauthorDec 16.2007 — Try this. Exactly as written. This should work.[/QUOTE]



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?
Copy linkTweet thisAlerts:
@WebJoelDec 16.2007 — I'm still trying to figure out what you are trying to do here...[code=html]<!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>[/code]
I made some [B]changes[/B] 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..
Copy linkTweet thisAlerts:
@TSSPatauthorDec 16.2007 — 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.
Copy linkTweet thisAlerts:
@WebJoelDec 16.2007 — Great. ?

-Note that I used the "universal selector" method, [B]* {margin:0; padding:0;}[/B]

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! ?
×

Success!

Help @TSSPat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...