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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    background repeating help

    http://img35.imageshack.us/img35/4460/31583593.png

    hi i am trying to find something out for a friend. i need a code that will make the middle of my content body extend down as long as i need it.

    as you can see from the screenshot i can't figure out how to make this image: http://img714.imageshack.us/img714/6057/bodymiddle.png

    repeat itself down the middle to fill that whole area up correctly.

    there should be a simple code for this if not let me know how to do it thanks

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    I assume you're coding using CSS and that your site is a fixed-width center-container layout?

    If so, try this CSS on your container:

    Code:
    #container {
       background: #000 url('http://img714.imageshack.us/img714/6057/bodymiddle.png') repeat-y;
    }
    matt | design | blog

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by msuffern View Post
    I assume you're coding using CSS and that your site is a fixed-width center-container layout?

    If so, try this CSS on your container:

    Code:
    #container {
       background: #000 url('http://img714.imageshack.us/img714/6057/bodymiddle.png') repeat-y;
    }
    No, it isn't.

    I'm just trying to use THIS image: http://img714.imageshack.us/img714/6057/bodymiddle.png

    And have it repeat itself down the middle of the page over and over as long as I need it for the content to fit and so the middle isn't an open window.

    http://img192.imageshack.us/img192/7691/contentn.png

    There is another screenie to show the area I want covered by that image.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    It would be helpful if we could see what code you have already instead of just providing a screenshot—can't know exactly what code to recommend without knowing how your site is put together.

    In any case, try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>Untitled</title>
    	
    	<style type="text/css">	
    	
    		* {
    			margin:0;
    			padding:0;
    		}
    		
    		body {
    			background:#333;
    		}
    		
    		div {
    			width:935px;
    			margin:0 auto;
    			padding:20px;
    		}
    	
    		#container {
    			background: #000 url('http://img714.imageshack.us/img714/6057/bodymiddle.png') repeat-y;
    			color:#fff;
    		}
    		
    	</style>
    	
    </head>
    
    <body>
    
    	<div id="header">Header goes here.</div>
    	
    	<div id="container">This div will expand with the content inside.  Change the text size in the browser window to see it get taller and shorter.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    	
    	<div id="footer">Footer goes here.</div>
    	
    </body>
    </html>
    The key line is highlighted in red.
    matt | design | blog

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    well you should try to post your html code here so that we can inspect or give a link..

    anyways.. here it goes..

    assuming you have that 3 divs.. you got that top-border mid-content and then bottom border

    Code:
    <div id="content-wrapper">
           <div id="top-border"></div><!--top-border"-->
           <div id="mid-content"></div><!--mid-content-->
           <div id="bottom-border"></div><!--bottom-border-->
    </div><!--content-wrapper-->
    body{background:url(images/bg.jpg) no-repeat;}
    #top-border{background:url(images/top.jpg) no-repeat;}
    #mid-content{background:url(images/bodymiddle.png) repeat-y;} // or just simply repeat;
    #bottom-border{background:url(images/bot.jpg) no-repeat;}

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by msuffern View Post
    It would be helpful if we could see what code you have already instead of just providing a screenshot—can't know exactly what code to recommend without knowing how your site is put together.

    In any case, try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>Untitled</title>
    	
    	<style type="text/css">	
    	
    		* {
    			margin:0;
    			padding:0;
    		}
    		
    		body {
    			background:#333;
    		}
    		
    		div {
    			width:935px;
    			margin:0 auto;
    			padding:20px;
    		}
    	
    		#container {
    			background: #000 url('http://img714.imageshack.us/img714/6057/bodymiddle.png') repeat-y;
    			color:#fff;
    		}
    		
    	</style>
    	
    </head>
    
    <body>
    
    	<div id="header">Header goes here.</div>
    	
    	<div id="container">This div will expand with the content inside.  Change the text size in the browser window to see it get taller and shorter.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    	
    	<div id="footer">Footer goes here.</div>
    	
    </body>
    </html>
    The key line is highlighted in red.
    This code worked, except for one thing. It won't show up unless i have text, but I just need it to blank and move down. I tried padding, and it works, but it screws up the rest of my template and sends everything down more where it shouldn't be.

  • #7
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by celexia View Post
    This code worked, except for one thing. It won't show up unless i have text, but I just need it to blank and move down. I tried padding, and it works, but it screws up the rest of my template and sends everything down more where it shouldn't be.
    Try using an HTML space.

    For example:

    Code:
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    Extend the code as much as you'd like to repeat your graphic. There may be a cleaner way of doing this that someone else might be able to suggest, though.

  • #8
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by celexia View Post
    This code worked, except for one thing. It won't show up unless i have text, but I just need it to blank and move down. I tried padding, and it works, but it screws up the rest of my template and sends everything down more where it shouldn't be.
    Then just give it a height... height:xxxpx;

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Do not give it a "HTML space". This is unsemantic and, well, wrong. As j...the previous poster said, setting an explicit height should solve your problem.

  • #10
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Add to the CSS for #container:

    min-height:200px;


    This will set a minimum height of 200px for your container so you can see what it looks like, even if there is not content in your container.

    It will also expand beyond 200px if the content needs it.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

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