Forum Moderators: not2easy
When repeating the gif I can get the repeat to work (fills up the whole content div with tiles of the gif. However, I put the -y on the end of it (or -x) and it stops working all together. Can anyone tell me what my mistake is?
other info:
*I am using IE-7
*My file structure is as follows:
public_html/index.htm
public_html/css/presidents-pallet-a.css
public_html/images/vert_line_dbl_1p.gif
*I believe I have trimmed out all the excess items from the two files while leaving them still executable.
Thanks in advance
-Alaric
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang=en>
<HEAD>
<TITLE>Some Title</TITLE>
<META http-equiv="content-type" content="text/html; charset=iso-8859-1">
<META name="keywords" content="blah, blah, blah">
<META name="description" content ="A page full of nothing">
<LINK type="text/css" rel="stylesheet" href="css/presidents-pallet-a.css" media="screen, print">
</HEAD>
<BODY>
<div id="footprint">
<div id="banner">
<h1>Some Title</h1>
</div>
<div id="navpane">
<p><a href="http://www.LinkOne.com">Link One</a></p>
<p><a href="http://www.LinkTwo.com">Link Two</a></p>
<p><a href="http://www.LinkThree.com" target="_blank">Link Three</a></p>
</div>
<div id="content">
<p>Some Content</p>
<p>Some Content</p>
<p>Some Content</p>
<p>Some Content</p>
<p>Some Content</p>
</div>
<div id="footer">
<p class="fineprint">Page last updated on:
<script type="text/javascript">
<!--//hide
document.write(document.lastModified);
//end hide-->
</script>
<br>Copywrite Info Here</p>
</div>
</div>
</BODY>
</HTML>CSS
BODY {
PADDING: 0px;
MARGIN: 0px;
COLOR: #000;
FONT-FAMILY: arial, sans-serif;
BACKGROUND-COLOR:#663
}
#footprint {
WIDTH: 960px;
MARGIN: 1em auto;
BORDER-RIGHT: #333 1px solid;
BORDER-TOP: #333 1px solid;
BORDER-LEFT: #333 1px solid;
BORDER-BOTTOM: #333 1px solid;
BACKGROUND-COLOR: #CC6
}
#banner {
BORDER-BOTTOM: #333 1px solid;
BACKGROUND-COLOR: #CC9;
TEXT-ALIGN: center
}
#banner H1 {
FONT-Size: 3em;
FONT-Weight: bold;
FONT-Style: italic;
PADDING: 0.5em;
MARGIN: 0px
}
#navpane {
FLOAT: left;
WIDTH: 170px;
PADDING: 1em 15px
}
#navpane P {
MARGIN-TOP: 0px;
TEXT-ALIGN: center
}
#content {
FLOAT: left;
WIDTH: 730px;
MARGIN: 0px;
PADDING: 1em 15px;
BACKGROUND-COLOR: #FFC;
BACKGROUND-IMAGE: URL("../images/vert_line_dbl_1p.gif");
BACKGROUND-ATTACHMENT: fixed;
BACKGROUND-POSITION: top left;
BACKGROUND-REPEAT: repeat-y
}
#footer {
CLEAR: both;
BORDER-TOP: #333 1px solid;
PADDING-RIGHT: .25em;
PADDING-TOP: .25em;
PADDING-LEFT: .25em;
PADDING-BOTTOM: .25em;
BACKGROUND-COLOR: #CC9;
TEXT-ALIGN: center
}
.fineprint {
FONT-SIZE: .65em;
}Any other comments beyond helping with my repeat-y question are also welcome.
BACKGROUND-ATTACHMENT: inherit;
BACKGROUND-POSITION: left;
Good luck
public_html/index.htm
public_html/css/presidents-pallet-a.css
public_html/images/vert_line_dbl_1p.gif
and You are using your CSS file in index.htm
please change path for image as
#content {
FLOAT: left;
WIDTH: 730px;
MARGIN: 0px;
PADDING: 1em 15px;
BACKGROUND-COLOR: #FFC;
BACKGROUND-IMAGE: URL("../images/vert_line_dbl_1p.gif");
BACKGROUND-ATTACHMENT: fixed;
BACKGROUND-POSITION: top left;
BACKGROUND-REPEAT: repeat-y;
}
to
#content {
FLOAT: left;
WIDTH: 730px;
MARGIN: 0px;
PADDING: 1em 15px;
BACKGROUND-COLOR: #FFC;
BACKGROUND-IMAGE: URL("images/vert_line_dbl_1p.gif");
BACKGROUND-ATTACHMENT: fixed;
BACKGROUND-POSITION: left top;
BACKGROUND-REPEAT: repeat-y;
}
I have tested your work.
These changes work:
BACKGROUND-ATTACHMENT: inherit;
BACKGROUND-POSITION: left;
This worked famously, thanks a ton. If you have time would you (or anyone else for that matter) mind explaining why the above changes worked and/or why my original code didn't?
Thanks in advance!
-Alaric
is often misunderstood.
It puts the image's position in reference to the viewport, not to where the item is rendered.
And when you scroll the page the background image will not move as the item it is applied to scrolls over it.
Wehn repeated the iamge is everywhere and this positioning is often not noticed, when it's not repeated all over, the positioning becomes critical as it's still only shown under the element itself, so the element needs to be above the background image before you can see the background is even there.
In the majority of cases where background-attachment: fixed; is used on other elements than body or html, it'll lead to trouble.
