...

View Full Version : CSS bg-image repeat-x problem



sugarharvester
12-01-2006, 04:49 PM
Hello everyone,

just registered, my first post here, got a little problem i want to get some help solving.

i'm trying to code a really simple horizontal gallery with fluid width so you can just add any number of images to it without worrying about having to change the layout.

i have a div container that has a background image that runs across the div using the "background-repeat" tag set to "repeat-x". problem is it only extends to the width of my browsers (FF, safari; coding on a mac os x) instead of the end of the page which i was hoping for. so when you scroll right you lose sight of the background image. any ideas on how to fix this? would it make more sense coding it as a table instead? i've attached a screenshot to explain what i mean visually.

here's what i've done so far:
http://www.colon-d.com/files/clients/tm/

the screenshot:
http://www.colon-d.com/files/clients/tm/images/cssbg_prob.jpg

and the code is here:


<!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=ISO-8859-1" />
<title>A TM Christmas</title>
<style type="text/css">
<!--
body {
background-color: #FFFF00;
margin:0px;
}

#header {
height:19px;
margin:0px;
padding:30px 50px;
}

#container {
background-image:url(images/bg03.gif);
background-repeat:repeat-x;
height:400px;
margin:0px;
padding: 20px 50px;
width:2000;
}

#textbox {
float:left;
width:200px;
padding-top:30px;
font-family:Helvetica,arial;
font-size:12px;
line-height:15px;
}

#cardbox {
position:relative;
margin-left:250px;
}

-->
</style></head>

<body>
<div id="header">
<img src="images/TMlogo.gif" />
</div>
<div id="container">
<div id="textbox">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nec libero nec nisl varius pretium. Suspendisse eu odio. Quisque at lacus vitae sapien fermentum sollicitudin. Praesent nec magna. Sed vitae nisi ac nulla volutpat venenatis.
</div>
<div id="cardbox" style="white-space: nowrap;">
<img src="images/card01.png" />
<img src="images/card01.png" />
<img src="images/card01.png" />
<img src="images/card01.png" />
<img src="images/card01.png" />
<img src="images/card01.png" />
<img src="images/card01.png" />
<img src="images/card01.png" />
<img src="images/card01.png" />
</div>
</div>
</body>
</html>


thanks a lot!

ahallicks
12-01-2006, 04:56 PM
2000px on your width in the container might help

Try using a validator before posting ;-)

Check out the error (http://jigsaw.w3.org/css-validator/validator?uri=http://www.colon-d.com/files/clients/tm/)

sugarharvester
12-01-2006, 05:29 PM
thanks ahallicks,

thanks for your suggestion. i'll use a validator before i post next time.

for the width tag, it was for a test (still in drafting stage) i forgot to make it a comment - ultimately i would not wish to use it because i want it to be fluid instead of fixed.

any more ideas anyone?

Graft-Creative
12-01-2006, 06:00 PM
Hi,

Try applying the background image to the body tag instead.

You might have to re-slice the image, and/or use the background-position property to get it to look exact though.

Kind regards,

Gary



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum