Hi there, I have replaced my leftside side bar background color with an image of the color in order for my pages sidebar color to reach the bottom of all pages. The first couple of lines in my CSS sidebar code currently look like: "/* Sidebars */ #leftside {background:url("img/side-bar.jpg") repeat scroll 0 0 #E6ECE9; clear:left; float:left; line-height:2em; margin:0 0 5px; padding:0; width:190px;}" I need this image to repeat so it reaches the bottom of all the pages, can anyone point me in the right direction? Many thanks chaps! Sam *************************************************** EDIT I changed the "repeat" to "repeat-y" but still no changes, could this be because there are no semi colons between the word repeat and scroll? Or is this a separate issue? Many thanks Sam
There are a couple ways to do this. One is to fake the appearance of a full height sidebar by applying the background image to the wrapper div instead of the sidebar. This works nicely if your sidebar is a fixed width. If your side bar is not a fixed width, you can fake it with a css trick. Set the bottom padding of your sidebar to very high number: #sidebar {padding-bottom: 50000px;} Code (markup): Then set the bottom margin to the same, only negative: #sidebar {margin-bottom: -50000px;} Code (markup): Since this will cause your sidebar to overflow the wrapper container, you need to set the overflow to hidden on the wrapper div: #wrapper {overflow: hidden;} Code (markup): You can't use a bottom border on your sidebar with this method. Both have their drawbacks, you just have to pick the one that works best for you.
Hi, Thanks for the help, I tried your advise but couldn't get it to work, it still only fills in the same space as the color did. My sitebar section within my stylesheet looks like: /* Sidebars */ #leftside {background:url("img/side-bar.jpg") repeat-y scroll 0 0 #E6ECE9; clear:left; float:left; line-height:2em; margin:0 0 5px; padding-bottom:50000; width:190px; margin-bottom: -50000px;} #extras {float:right; line-height:1.4em; margin:0 0 5px; padding:0; width:190px;} #leftside p, #leftside ul, #leftside div.textwidget, #extras p, #extras ul, #extras div.textwidget {font-size:1.1em; margin:0 0 18px;} #leftside li, #extras li {line-height:2em; list-style:none; margin:0 0 6px;} #leftside ul ul, #extras ul ul {margin:6px 0 0 10px;} #leftside ul ul li, #extras ul ul li {margin:0 0 4px;} #leftside ul ul li a, #extras ul ul li a {font-weight:normal;} #leftside ul.linklist, #extras ul.linklist {font-size:1.1em;} #leftside ul.linklist ul, #extras ul.linklist ul {margin:0 0 20px;} #leftside ul.linklist ul li a, #extras ul.linklist ul li a {font-weight:bold;} #leftside h2, #leftside ul.linklist li h2, #leftside h3, #extras h2, #extras ul.linklist li h2, #extras h3, table#wp-calendar caption {background-color:inherit; color:#505050; font-size:1.3em; font-weight:normal; text-align:left; margin:0 0 6px;} #leftside label, #extras label {display:none;} Code (markup): Also i couldn't find where the wrapper div, however I did see: /* Float fix */ .contenttext {overflow:hidden;} * html .contenttext {height:1px; overflow:visible;} * html .contenttext p {overflow:hidden; width:99%;} Code (markup): Any advice? Thanks, Sam
It might be easier to see an example: http://www.midwestwebtrends.com/testing/full-length-sidebar.html As you can see, the sidebar in blue, extends to the bottom of the page. Here is the full code for that page: <!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> <title>Full Length Sidebar</title> <style type="text/css"> #header{ height: 100px; background: green; } #wrapper{ overflow: hidden; } #leftside{ float: left; background: blue; padding: 10px; padding-bottom: 50000px; width: 25%; margin-bottom: -50000px; } #content{ margin-left: 25%; padding: 20px 20px 20px 30px; background: grey; } </style> </head> <body> <div id="header"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis lacinia ligula quis tristique. Sed vel purus blandit arcu lacinia semper. Nulla facilisi. Nam vel leo augue. Donec venenatis viverra vulputate. Aenean a elit quis ipsum pellentesque laoreet. Fusce diam magna, aliquet non sollicitudin eget, pretium in mi. Nunc tempus est sed mi gravida egestas. Integer sed nulla magna, vitae adipiscing diam. Proin posuere tincidunt urna, non ultricies sapien dapibus iaculis. Sed a magna justo. In dictum leo sit amet sapien eleifend sagittis. Pellentesque eget turpis nunc, id aliquam lorem. </p> </div> <div id="wrapper"> <div id="leftside"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis lacinia ligula quis tristique. Sed vel purus blandit arcu lacinia semper. Nulla facilisi. Nam vel leo augue. Donec venenatis viverra vulputate. Aenean a elit quis ipsum pellentesque laoreet. Fusce diam magna, aliquet non sollicitudin eget, pretium in mi. Nunc tempus est sed mi gravida egestas. Integer sed nulla magna, vitae adipiscing diam. Proin posuere tincidunt urna, non ultricies sapien dapibus iaculis. Sed a magna justo. In dictum leo sit amet sapien eleifend sagittis. Pellentesque eget turpis nunc, id aliquam lorem. </p> </div> <div id = "content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis lacinia ligula quis tristique. Sed vel purus blandit arcu lacinia semper. Nulla facilisi. Nam vel leo augue. Donec venenatis viverra vulputate. Aenean a elit quis ipsum pellentesque laoreet. Fusce diam magna, aliquet non sollicitudin eget, pretium in mi. Nunc tempus est sed mi gravida egestas. Integer sed nulla magna, vitae adipiscing diam. Proin posuere tincidunt urna, non ultricies sapien dapibus iaculis. Sed a magna justo. In dictum leo sit amet sapien eleifend sagittis. Pellentesque eget turpis nunc, id aliquam lorem. Nulla facilisi. Duis volutpat, lorem id tempus congue, libero massa vulputate odio, id fringilla massa arcu in dui. Aenean sit amet lorem at tortor interdum venenatis vel vel tortor. Mauris hendrerit dictum tempus. In lobortis porta nunc, et sagittis nisi rutrum ac. Nulla volutpat vestibulum leo in tincidunt. Integer eu sollicitudin ligula. In sollicitudin tincidunt massa sit amet convallis. Nullam ut ante id elit sodales faucibus. Nam elementum tellus ornare ante consectetur eget rutrum purus euismod. Fusce id cursus metus. Nam ornare, enim eu adipiscing facilisis, diam elit cursus nunc, tempor hendrerit massa odio at risus. Cras urna justo, dictum in malesuada a, ornare vel nulla. Cras commodo adipiscing mauris et tincidunt. In hac habitasse platea dictumst. Suspendisse dictum scelerisque scelerisque. Fusce fringilla pretium metus non sagittis. Vivamus semper sem tristique ipsum semper non gravida nisi viverra. Donec eu quam sit amet nunc sollicitudin pulvinar vel vel dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vitae diam sed purus volutpat posuere. Vestibulum ac magna diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam congue orci in lectus faucibus dictum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis lacinia ligula quis tristique. Sed vel purus blandit arcu lacinia semper. Nulla facilisi. Nam vel leo augue. Donec venenatis viverra vulputate. Aenean a elit quis ipsum pellentesque laoreet. Fusce diam magna, aliquet non sollicitudin eget, pretium in mi. Nunc tempus est sed mi gravida egestas. Integer sed nulla magna, vitae adipiscing diam. Proin posuere tincidunt urna, non ultricies sapien dapibus iaculis. Sed a magna justo. In dictum leo sit amet sapien eleifend sagittis. Pellentesque eget turpis nunc, id aliquam lorem. Nulla facilisi. Duis volutpat, lorem id tempus congue, libero massa vulputate odio, id fringilla massa arcu in dui. Aenean sit amet lorem at tortor interdum venenatis vel vel tortor. Mauris hendrerit dictum tempus. In lobortis porta nunc, et sagittis nisi rutrum ac. Nulla volutpat vestibulum leo in tincidunt. Integer eu sollicitudin ligula. In sollicitudin tincidunt massa sit amet convallis. Nullam ut ante id elit sodales faucibus. Nam elementum tellus ornare ante consectetur eget rutrum purus euismod. Fusce id cursus metus. Nam ornare, enim eu adipiscing facilisis, diam elit cursus nunc, tempor hendrerit massa odio at risus. Cras urna justo, dictum in malesuada a, ornare vel nulla. Cras commodo adipiscing mauris et tincidunt. In hac habitasse platea dictumst. Suspendisse dictum scelerisque scelerisque. Fusce fringilla pretium metus non sagittis. Vivamus semper sem tristique ipsum semper non gravida nisi viverra. Donec eu quam sit amet nunc sollicitudin pulvinar vel vel dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vitae diam sed purus volutpat posuere. Vestibulum ac magna diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam congue orci in lectus faucibus dictum. </p> </div> </div> </body> </html> HTML:
Hi, Thanks for the reply, I tried changing my leftside to: #leftside{ float: left; background:url("img/side-bar.jpg"); padding: 10px; padding-bottom: 50000px; width: 25%; margin-bottom: -50000px; } Code (markup): With #wrapper {overflow: hidden;} Code (markup): Below the leftside. However this made my background side bar image disappear and the wrapper div didn't work, hence my webpage became very long! What am I missing? Many thanks for all your advise so far. Sam
This works Add height: 800px; to leftside match the height in content Make sure your image folder is img not image #leftside{ float: left; background: blue; background-image: url("img/side-bar.jpg"); padding: 10px; padding-bottom: 0px; height: 800px; width: 25%; }
Did you actually create the div with an id of wrapper that wraps your sidebar and content? Do you have a link, or can you post your full code?
Hi, Thanks for your response, I edited the image text slightly which got my image appearing, and shortened the width for aesthetic reasons. The image is still being continually repeated leaving a very long stretch of white blank past my content/comment section. I feel I am within an inch of success! So thank-you for all your help. You can see my code below: /* Theme Name: WP-Andreas01 Theme URI: http://andreasviklund.com/wordpress-themes/ Description: Based on the <a href="http://andreasviklund.com/templates/andreas01/">andreas01 free website template</a>, this WordPress theme version provides a simple, stylish and useful design that is easy to customize for your needs. Updated to work with WordPress 3.0+. Please report errors to the theme designer. Version: 3.0 beta Author: Andreas Viklund Author URI: http://andreasviklund.com/ */ /* Body */ * {margin:0; padding:0;} body {background:#f4f4f4 url(img/bg2.gif) top center repeat-y; color:#303030; font:76% Verdana,Tahoma,Arial,sans-serif;} #wrap {background-color:#fff; color:#333; margin:0 auto; width:950px; padding:0px 10px;} /* Links */ a {color:#4088b8; font-weight:bold;} a:hover {color: #000000;} a img {border:0;} /* Header */ #header {margin:10px 0 0;} #header h1 {background-color:inherit; color:#555; float:left; font-size:2em; letter-spacing:-1px; margin:0 0 10px; width: 460px;} #header h1 a {background-color:inherit; color:#555; text-decoration:none;} #header p {background-color:inherit; color:#777; float:right; font-size:1.1em; font-weight:bold; line-height:1.3em; margin:6px 0 0; text-align: right; width:410px;} #frontphoto {margin:0 0 10px;} /* Wrapper */ #{overflow: hidden;} /* Sidebars */ #leftside{ float: left; background-image: url("img/side-bar.jpg"); padding: 10px; padding-bottom: 50000px; width: 18%; margin-bottom: -50000px;} #extras {float:right; line-height:1.4em; margin:0 0 5px; padding:0; width:190px;} #leftside p, #leftside ul, #leftside div.textwidget, #extras p, #extras ul, #extras div.textwidget {font-size:1.1em; margin:0 0 18px;} #leftside li, #extras li {line-height:2em; list-style:none; margin:0 0 6px;} #leftside ul ul, #extras ul ul {margin:6px 0 0 10px;} #leftside ul ul li, #extras ul ul li {margin:0 0 4px;} #leftside ul ul li a, #extras ul ul li a {font-weight:normal;} #leftside ul.linklist, #extras ul.linklist {font-size:1.1em;} #leftside ul.linklist ul, #extras ul.linklist ul {margin:0 0 20px;} #leftside ul.linklist ul li a, #extras ul.linklist ul li a {font-weight:bold;} #leftside h2, #leftside ul.linklist li h2, #leftside h3, #extras h2, #extras ul.linklist li h2, #extras h3, table#wp-calendar caption {background-color:inherit; color:#505050; font-size:1.3em; font-weight:normal; text-align:left; margin:0 0 6px;} #leftside label, #extras label {display:none;} /* Main menu */ div.menu ul {list-style:none; margin:0 0 20px; width:190px; padding:0;} div.menu ul li {display:inline; line-height:1.4em; width:190px; margin:0; padding:0;} div.menu ul li a {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#505050; float:left; font-weight:bold; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:180px;} div.menu ul li a:hover, div.menu li.current_page_item a {background-color:#eaeaea; border-left:4px solid #286ea0; color:#505050;} div.menu li.current_page_item ul li a {border-left:4px solid #cccccc; color:#505050;} div.menu ul li ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px; width:170px;} div.menu ul li ul li a {padding:4px 1px 4px 5px; width:170px;} div.menu ul li ul li ul li {width:160px;} div.menu ul li ul li ul li a {width:160px;} /* Content */ #content {line-height:1.6em; margin:0 205px 5px; padding:0;} #contentwide {line-height:1.6em; margin:0 0 5px 200px; padding:0;} #content h2,#contentwide h2 {font-size:1.6em; margin:0 0 10px;} #content h3,#contentwide h3 {font-size:1.4em; margin:0 0 8px;} /*#content img,#contentwide img {border:1px solid #d0d0d0; float:left; margin:3px 10px 3px 0;}*/ #content ul,#contentwide ul,#content ol,#contentwide ol {margin:0 0 16px 20px;} #content li,#contentwide li {padding:0 0 0 5px;} #content ul ul,#contentwide ul ul,#content ol ol,#contentwide ol ol {margin:0 0 0 16px;} /* Footer */ #footer {border-top:2px solid #e0e0e0; font-size:0.9em; clear:both; color:#777; font-weight:normal; line-height:1.7em; margin:0 auto; padding:10px 0; text-align:center; width:950px;} #footer p {margin:0; padding:0;} #footer a {color:#777; font-weight:normal; text-decoration:none;border-bottom:0; } #footer a:hover {color:#555; text-decoration:underline;border-bottom:0;} #footer strong a {font-weight:bold;} #footer span.credits {font-size:1.1em;} /* Subpage menu */ #subpages {border-bottom:1px solid #e0e0e0; border-left:1px solid #e0e0e0; border-bottom:0; float:right; font-weight:bold; line-height:1.3em; margin:-5px 0 8px 15px; padding:0 0 10px 10px; width:190px;} #subpages h2 {font-size:1.2em; font-weight:bold; letter-spacing:-1px; line-height:1.3em; margin:0 0 12px;} #subpages ul.submenu {line-height:1.4em; list-style:none; margin:0;} #subpages ul.submenu li {display:inline; line-height:1.4em; width:180px; padding:0;} #subpages ul.submenu li a {background-color:#f4f4f4; border-left:4px solid #cccccc; border-bottom:0; color:#505050; float:left; font-weight:bold; margin-bottom:5px; padding:3px 1px 3px 5px; text-decoration:none; width:180px;} #subpages ul.submenu li ul {margin:0 0 5px 10px; width:170px;} #subpages ul.submenu li ul li a {width:170px;} #subpages ul.submenu li ul ul {margin:0 0 5px 10px; width:160px;} #subpages ul.submenu li ul ul li a {width:160px;} #subpages ul.submenu li ul ul ul {margin:0 0 5px 10px; width:150px;} #subpages ul.submenu li ul ul ul li a {width:150px;} #subpages ul.submenu li a:hover,#subpages ul.submenu li.current_page_item a {background-color:#eaeaea; border-left:4px solid #286ea0; color:#555;} #subpages ul.submenu li.current_page_item ul li a {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#555;} /* Tags */ p,ul,ol {margin:0 0 18px;} blockquote {border-left:4px solid #e0e0e0; margin:20px; padding:8px 8px 8px 15px;} blockquote p {background-color:inherit; color:#505050; font-size:0.9em; line-height:1.3em;} label {background-color:inherit; color:#606060; font-size:0.9em; font-weight:bold;} table#wp-calendar {margin:0 0 20px; width:190px;} code {font-size:1.2em; display:block; padding:5px 5px 5px 8px; background-color:#f4f4f4; margin:5px 0 15px 0;border-left:4px solid #cccccc;} /* Forms */ #s,#submit {background-color:#ffffff; border:1px solid #cccccc; color:#505050; font-size:0.9em; margin:0 0 16px; padding:4px; width:180px;} #author,#email,#url,#comment {border:1px solid #cccccc; font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:1em; margin:0; padding:4px;} #commentsection {margin:25px 0 0;} #commentsection p {margin:0 0 6px;} /* Float fix */ .contenttext {overflow:hidden;} * html .contenttext {height:1px; overflow:visible;} * html .contenttext p {overflow:hidden; width:99%;} /* WP image align classes */ .alignleft {float:left;} .alignright {float:right;} img.alignleft {margin:0 20px 20px 0;} img.alignright {margin:0 0 20px 20px;} img.aligncenter,.aligncenter {float:none; display:block; margin:0 auto;} img.alignnone,.alignnone {float:none; margin:0;} /* Various classes */ .left {border:1px solid #cccccc; float:left; margin:10px 15px 10px 0;} .right {border:1px solid #cccccc; float:right; margin:10px 0 5px 10px;} .center {border:1px solid #aaaaaa; margin:5px auto 12px; text-align:center;} .textright {text-align:right;} .small {font-size:0.8em;} .bold {font-weight:bold;} .hide {display:none;} .post {margin:0 0 25px;} .postinfo {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#606060; font-size:0.9em; font-weight:bold; line-height:1.5em; margin:1px 0 30px; padding:8px 5px 8px 8px;} .comment {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#606060; margin:0 0 10px; padding:8px 5px 0 8px;} .comment p {font-size:0.9em; line-height:1.3em; margin:0 0 6px; padding-bottom:5px;} .gravatarside {float:right; width:48px; height:48px; margin:0 5px 5px 5px;} .navigation {display:block; margin:10px 0 20px 0; padding:0; text-align:center;} .navigation p {margin:0; padding:0;} .prevlink {margin-right:20px;} .nextlink {margin-left:20px;} Code (markup): I'm sure its my wrapper that I'm doing wrong. @pctraffic, thanks for your advise but this won't repeat my image in quite the right way (since I need it to change depending on the page length rather than using your fixed length). Many thanks all! Sam
OK, it looks like you are using wordpress. It sounds like the problem you are having at this point is adding a #wrapper div in which to add overflow: hidden to. I see this in your code: /* Wrapper */ #{overflow: hidden;} Code (markup): What you need is something like: /* Wrapper */ #wrapper{overflow: hidden;} Code (markup): The problem is, you probably don't have a div name wrapper wrapping your content and sidebar area. However, depending on your template, you probably have a wrapper div but it's named something else. The only way to know is to look at the source html code. Once you identify the name of the wrapper, then just replace wrapper with the correct name. For example, your wrapper could be called content_wrapper in which case you would need: /* Wrapper */ #content_wrapper{overflow: hidden;} Code (markup): in your css If your wordpress template does not have a div wrapping your content and sidebar together then your looking at editing your wordpess template. It would help if you could also post your html source code.