Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS bg-image repeat-x problem

    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...cssbg_prob.jpg

    and the code is here:

    Code:
    <!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!

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    2000px on your width in the container might help

    Try using a validator before posting ;-)

    Check out the error
    Last edited by ahallicks; 12-01-2006 at 05:00 PM.

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •