Why is my background misbehaving? [Archive]

deviled egg

08-11-2008, 01:23 AM

What is going on here? Please view my site in Firefox and IE. It’s working in IE (for a change) but in Firefox it’s scrolling weird. the content background is locked in place and my content scrolls with it, but the whole content div should move, just the background should stay put. Any help is appreciated. See code posted below:

(And, on a side note, is any one having issues with Firefox 3.0? I lost all my cool tools for web development when I upgraded my Firefox, fire ftp, webdeveloper etc.)

Thanks!!

body {
background-image: url(../images/mhl-bkgrd2.jpg);
background-attachment: fixed;
background-repeat:no-repeat;
}

.container {
width: 975px;
height:748px;
background-image: url(../images/content-bkgrd2up.jpg);
background-repeat: no-repeat;
background-position: center top;
border: thick solid #ED1651;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

.centered {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
margin: auto;
}
.nav {
width: 200px;
margin-top: 250px;
margin-left: 360px;
}

.body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: normal;
line-height: normal;
color: 9a9ea1;
}
.bodyb {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: 9a9ea1;
}

.navtext {
font-family: Elephant, Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-style: normal;
color: 9a9ea1;
}
a.navtext:link {
color: #9A9EA1;
text-decoration: none;
}
a.navtext:visited {
color: #ED1651;
text-decoration: line-through;
}
a.navtext:hover {
color: #78A842;
text-decoration: underline;
}
a.navtext:active {
color: #9A9EA1;
text-decoration: blink;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Photographer - Graphic Designer - Phoenix, AZ</title>
<link href="css/meg-style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="container">
<div class="nav">
<div class="navtext"><a class="navtext"href="pdf/MLResume-web.pdf" target="_blank">resume</a><br>
portfolio<br>
<a class="navtext"href="mailto:meaghan_at_meaghanlewis.com">contact</a></p></span>


</div>
</div>
</div>

<script src="css/scramble.js" type="text/javascript" language="Javascript1.2" charset="utf-8"></script>
<script type="text/javascript" language="Javascript1.2" charset="utf-8">
// Minimum
unscramble( 0 );
// Maximum - uncomment to use
// unscramble( 1 );
</script>
</body>
</html>

tZ

08-11-2008, 02:06 AM

FF 3 versions of developer and firebug have been released. Just a heads up.

tZ

08-11-2008, 02:08 AM

body {
background-image: url(../images/mhl-bkgrd2.jpg);
background-attachment: fixed;
background-repeat:no-repeat;
}

Setting this property to fixed locks the content in place. Removing this rule should result in the intended behavior.

http://www.w3schools.com/css/pr_background-attachment.asp

tZ

08-11-2008, 02:13 AM

I misunderstood the problem. Ignore my previous post.

link?

deviled egg

08-11-2008, 05:04 AM

http://www.meaghanlewis.com/index2.html thank you!!

tZ

08-11-2008, 04:00 PM

.container is picking up background-attachment: fixed. The problem is fixed if you add this rule to the .container class.

background-attachment:scroll;

If you have firebug you'll see what I mean. Otherwise just add that rule and it should behave as expected.

Actually, its in your style sheet whether you intended to declare it or not.

meg-style.css line11

7.container {
8 width: 975px;
9 height:748px;
10 background-image: url(../images/content-bkgrd2up.jpg);
11 background-attachment: fixed;
12 background-repeat: no-repeat;
13 background-position: center top;
14 border: thick solid #ED1651;
15 margin-top: 0px;
16 margin-right: auto;
17 margin-bottom: 0px;
18 margin-left: auto;
19 padding: 0px;
20}