PDA

View Full Version : Making foreground scroll while background stays fixed



SKY-ProToSs
Mar 30th, 2007, 11:33 AM
I want to put a bar behind the content div that I'm using.

I want it so that

#container {


scrolls

and the background

.body {

does not scroll so that the bar is always visible as you scroll down the page.

Is there a way to do this? I googled it many times and couldn't find anything.

jlhaslip
Mar 30th, 2007, 11:54 AM
http://jlhaslip.trap17.com/samples/bckgnd_tile/index.html

like that?

SKY-ProToSs
Mar 30th, 2007, 12:09 PM
exactly like that :) except just giving me that link didn't help much :(

jlhaslip
Mar 30th, 2007, 12:34 PM
just happened to be working with that file open when I saw your posting. :)

SKY-ProToSs
Mar 30th, 2007, 12:36 PM
just happened to be working with that file open when I saw your posting. :)

So do you have a solution? :)

here is my css, I know it probably has errors but I just want the scroll fixed for now



html, body{
margin:0;
padding:0;
border:0;
background-color:#1d2a30;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #2130BD;
font-weight:normal;
background-image: url(backgroundbar.gif);
background-position:fixed;
background-repeat: repeat-x;
}

a, a:link, a:visited, a:active {
color:#000;
background-color:inherit;
text-decoration:none;
}
a:hover {
color:#4a975b;
background-color:inherit;
}
#container {
width:790px;
margin:left;
margin-left:8%;
background:#30653c url(navbar.gif) repeat-y;
background-position: right;
color:#000;
padding-right:0;
padding:0;
min-height:100%;
border-right:0px solid #000;
}
#container3 {
position:absolute;
width:820px;
margin:left;
background:#000 url(sideshadow.gif) repeat-y;
min-height:100%;
}
#copywright {
width:820px;
height:25px;
margin:auto;
vertical-align: bottom;
}
#bottom {
width:820px;
height:23px;
margin:auto;
vertical-align: bottom;
}
* html #container {
height:100%;
}
#header {
height:193px;
line-height:0px;
font-size:0;
border-right:0px solid #000;
}
#header2 {
width:791px;
height:30px;
margin:auto;
background:#131d15;
}
#nav {
width:159px;
float:right;
padding-right:0px;
}
#nav ul {
margin:0;
padding-right:0;
list-style:none;
}
#nav ul li {
list-style:none;
padding-right:0px;
margin-top:0px;
}
ul, li {
margin: 0;
padding: 0;
}
#nav ul li.navtitle {
padding:0;
margin:0;
line-height:0px;
font-size:0;
margin-bottom:15px;
margin-top:0px;
}
#content {
width:600px;
height:600px;
padding:5px;
float:left;
text-align:left;
}
#content p {
margin:0;
padding:0 0 5px 0;
text-align:justify;
}
#content object {
margin:10px auto;
display:block;
}
.clear {
clear:both;
line-height:0px;
font-size:0;
}
hr {
height:0;
line-height:0px;
font-size:0;
border:0;
border-bottom:1px solid #707070;
}
.borderTable {
padding: 2px 4px 2px 4px;
border: 1px solid #d60707;
}

jlhaslip
Mar 30th, 2007, 12:48 PM
Sorry.
I answered the original post with a solution which is a file that does exactly what you asked for.
Body contains a fixed image, and the "content" scrolls in front of it.

Place your code into my structure and see what you get. I am here to help, not do the page for you.

http://www.catb.org/~esr/faqs/smart-questions.html#rtfm

Arbitrator
Mar 30th, 2007, 01:44 PM
A “manual” that you might want to check out is the CSS specification (http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment). Compare that with the declaration in red below.




html, body{
margin:0;
padding:0;
border:0;
background-color:#1d2a30;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #2130BD;
font-weight:normal;
background-image: url(backgroundbar.gif);
background-position:fixed;
background-repeat: repeat-x;
}


You might also want to check CodingForum.com’s vB Code “manual” (http://www.codingforums.com/misc.php?do=bbcode). [HTML] is not a tag; try [code].

Did you mean “copyright”?

#copywright {
jlhaslip, your code is slightly short of valid.

jlhaslip
Mar 30th, 2007, 02:06 PM
Fixed.
Had no bearing on the effect the OP requested. Merely a typo in some filler content.