PDA

View Full Version : Container background image won't scroll?

TonyaB
September 2nd, 2007, 02:11 PM
See the page here (http://rockingit.org/ms-goodies/test.php).

The container background doesn't scroll with the text so the text is just overlapping.. It's suppose to repeat all the way down.

This is my header.php file:
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" href="http://www.ms-goodies.com/style.css" type="text/css">
<div id="container">
<div id="header">
<IMG NAME="header0" SRC="http://www.ms-goodies.com/header.png" WIDTH="1009" HEIGHT="465" BORDER="0" USEMAP="#header">

<MAP NAME="header">
<AREA SHAPE="rect" COORDS="91,4,169,35" HREF="">
<AREA SHAPE="rect" COORDS="216,3,330,36" HREF="">
<AREA SHAPE="rect" COORDS="362,4,457,34" HREF="">
<AREA SHAPE="rect" COORDS="496,4,612,36" HREF="">
<AREA SHAPE="rect" COORDS="647,5,779,34" HREF="">
<AREA SHAPE="rect" COORDS="807,5,917,34" HREF="">
</MAP>
</div>

<div id="footer">
<IMG NAME="Image40" SRC="http://www.ms-goodies.com/footer.png" WIDTH="1009" HEIGHT="100" BORDER="0" USEMAP="#Image4">
<MAP NAME="Image4">
<AREA SHAPE="rect" COORDS="269,59,386,79" HREF="">
<AREA SHAPE="rect" COORDS="396,58,588,79" HREF="">
<AREA SHAPE="rect" COORDS="597,59,678,81" HREF="">
<AREA SHAPE="rect" COORDS="687,59,740,80" HREF="">
</MAP>
</div>
</div><!--container end-->

<div style="position:absolute;left:40px;top:220px;width:215px;">
<div class="content">
<h2>TITLE</h2>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

<div class="content">
<h4>TITLE</h4>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

<div class="content">
<h5>TITLE</h5>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</div>

<div style="position:absolute;left:751px;top:220px;width:215px ;">
<div class="content">
<h5>TITLE</h5>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

<div class="content">
<h2>TITLE</h2>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

<div class="content">
<h4>TITLE</h4>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</div>

<div style="position:absolute;left:248px;top:220px;width:510px ;">
<div class="content">


and footer.php:
</div>
</body>
</html>
minnseoelite
September 2nd, 2007, 02:19 PM
i assume you are wanting just the container background image (not the header or footer background images) to scroll

here is your current css


#container {
background: url(bg.png) repeat-y;
width: 1009px;
margin: -9px 0 -9px -9px;}
#header {
left: 0;
top: 0;
width : 1009px;
height: 465px;
background: url(header.png) no-repeat;}
#footer {
background: url(footer.png) no-repeat;
height: 100px;}

looks like you need to add this CSS to your container background

background-attachment: scroll;


Im a little tired today so hopefully I am on the same track with what you are wanting to do
TonyaB
September 2nd, 2007, 02:22 PM
Thanks, I added that and it didn't do anything.

This is the background image I want to use:
http://rockingit.org/ms-goodies/bg.png

It's for the columns to repeat down.
minnseoelite
September 2nd, 2007, 02:24 PM
ok are you wanting it to scroll or to repeat vertically i thought you was looking to make it scroll or do you want it to stay fixed while the content scrolls......lol sorry im easily confused today
TonyaB
September 2nd, 2007, 02:25 PM
The BG to repeat vertically.

#container {
background: url(bg.png) repeat-y;
width: 1009px;
background-attachment: scroll;
margin: -9px 0 -9px -9px;}
minnseoelite
September 2nd, 2007, 02:31 PM
The BG to repeat vertically.

#container {
background: url(bg.png) repeat-y;
width: 1009px;
background-attachment: scroll;
margin: -9px 0 -9px -9px;}



use this i have taken out the scroll as well

#container {
background: url('bg.png'); background-repeat: repeat-y;
width: 1009px;
margin: -9px 0 -9px -9px;}
TonyaB
September 2nd, 2007, 02:51 PM
Alright now we're back to where I started =P I think it has something to do with this part:


<html>
<head><title></title>
<link rel="stylesheet" href="http://www.ms-goodies.com/style.css" type="text/css"></head>
<div id="container">
<div id="header">
<IMG NAME="header0" SRC="http://www.ms-goodies.com/header.png" WIDTH="1009" HEIGHT="465" BORDER="0" USEMAP="#header">

<MAP NAME="header">
<AREA SHAPE="rect" COORDS="91,4,169,35" HREF="">
<AREA SHAPE="rect" COORDS="216,3,330,36" HREF="">
<AREA SHAPE="rect" COORDS="362,4,457,34" HREF="">
<AREA SHAPE="rect" COORDS="496,4,612,36" HREF="">
<AREA SHAPE="rect" COORDS="647,5,779,34" HREF="">
<AREA SHAPE="rect" COORDS="807,5,917,34" HREF="">
</MAP>
</div>

<div id="footer">
<IMG NAME="Image40" SRC="http://www.ms-goodies.com/footer.png" WIDTH="1009" HEIGHT="100" BORDER="0" USEMAP="#Image4">
<MAP NAME="Image4">
<AREA SHAPE="rect" COORDS="269,59,386,79" HREF="">
<AREA SHAPE="rect" COORDS="396,58,588,79" HREF="">
<AREA SHAPE="rect" COORDS="597,59,678,81" HREF="">
<AREA SHAPE="rect" COORDS="687,59,740,80" HREF="">
</MAP>
</div>
</div><!--container end-->


I tried moving the div codes around, putting the div id-"footer" part in my footer file. Putting the <div id="container"> at the end of header.php, and it doesn't work.
Leezon
September 2nd, 2007, 02:55 PM
Your coindg is a complete mess. are you trying to get the white spaces to repeat down to compensate for the content?
TonyaB
September 2nd, 2007, 03:00 PM
If you mean mess as in errors than yeah maybe. But it's organized O_o

Yeah "white spaces to repeat down to compensate for the content"

Your coindg is a complete mess. are you trying to get the white spaces to repeat down to compensate for the content?
TonyaB
September 3rd, 2007, 02:44 AM
I have this fixed now :)