#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    3
    Rep Power
    0

    Background repeat help


    Just registered and I've tried searching for answers all over but can't seem to solve what I'm hoping is a simple problem.

    I have made a website for my nephew's new vocal group. It uses CSS to help maintain the overall design.

    The problem is with the Content DIV containing a left column, centre column and right column DIVS.

    I need the background images used in the left and right columns to repeat down the page (forming a border) along with the centre column which contains a y-repeating white background. The left and right column images have a height of 448 pixels and a width of 20 pixels each.

    The centre column seems to repeat okay when text is added (as I wish) but the side images remain at their height and don't make up the border. I am currently making new borders of varying heights to accommodate the content on pages where the content exceeds the images height, but this is a time consuming process and I believe that I should just be able to make the column images repeat with varying length content.

    I'm using a test page as a template to play around with so I don't mess up the existing site. I think the problem lies in my CSS styles for the DIVS.

    Here is the test page code:

    Note: the text is just repeated to test the background repeating with longer content.

    -----------------------------------------
    HTML:
    Code:
    <div id="leftcol"></div>
        <div id="centercol"> <p align="justify" class="pagetext">Formed in May 2013, Endless Summer are an acoustic duo covering a variety of music both old and new.</p><div align="center">
              <h1><span class="pagetext2">Endless Summer are:        
              </span>
            </h1>
            <ul>
              <li>
                  <div align="left" class="pagetext2">Amy Bellamy - Vocals</div>
              </li>
                <li>
                  <div align="left" class="pagetext2">Jonny Lavin - Guitar, Vocals</div>
                </li>
            </ul>
         </div>
          <p align="justify" class="pagetext">Covering a variety of artists and playing a mix of genres, Endless Summer are based in North Lincolnshire. They put their own unique spin on popular and lesser know songs by a variety of artists and also perform their own material.</p>
        <p align="justify" class="pagetext">They can be regularly seen performing live in a variety of venues around the county and are building up a strong fanbase on the local music scene.</p>
        <p align="justify" class="pagetext">Covering a variety of artists and playing a mix of genres, Endless Summer are based in North Lincolnshire. They put their own unique spin on popular and lesser know songs by a variety of artists and also perform their own material.</p>
        <p align="justify" class="pagetext">They can be regularly seen performing live in a variety of venues around the county and are building up a strong fanbase on the local music scene.Covering a variety of artists and playing a mix of genres, Endless Summer are based in North Lincolnshire. They put their own unique spin on popular and lesser know songs by a variety of artists and also perform their own material.</p>
        <p align="justify" class="pagetext">They can be regularly seen performing live in a variety of venues around the county and are building up a strong fanbase on the local music scene.Covering a variety of artists and playing a mix of genres, Endless Summer are based in North Lincolnshire. They put their own unique spin on popular and lesser know songs by a variety of artists and also perform their own material.</p>
        <p align="justify" class="pagetext">They can be regularly seen performing live in a variety of venues around the county and are building up a strong fanbase on the local music scene.Covering a variety of artists and playing a mix of genres, Endless Summer are based in North Lincolnshire. They put their own unique spin on popular and lesser know songs by a variety of artists and also perform their own material.</p>
        <p align="justify" class="pagetext">Covering a variety of artists and playing a mix of genres, Endless Summer are based in North Lincolnshire. They put their own unique spin on popular and lesser know songs by a variety of artists and also perform their own material.</p>
        <p align="justify" class="pagetext">They can be regularly seen performing live in a variety of venues around the county and are building up a strong fanbase on the local music scene.Covering a variety of artists and playing a mix of genres, Endless Summer are based in North Lincolnshire. They put their own unique spin on popular and lesser know songs by a variety of artists and also perform their own material.</p>
        <p align="justify" class="pagetext">They can be regularly seen performing live in a variety of venues around the county and are building up a strong fanbase on the local music scene.Covering a variety of artists and playing a mix of genres, Endless Summer are based in North Lincolnshire. They put their own unique spin on popular and lesser know songs by a variety of artists and also perform their own material.</p>
        <p align="justify" class="pagetext">They can be regularly seen performing live in a variety of venues around the county and are building up a strong fanbase on the local music scene.Covering a variety of artists and playing a mix of genres, Endless Summer are based in North Lincolnshire. They put their own unique spin on popular and lesser know songs by a variety of artists and also perform their own material.</p>
        <p align="justify" class="pagetext">They can be regularly seen performing live in a variety of venues around the county and are building up a strong fanbase on the local music scene.Covering a variety of artists and playing a mix of genres, Endless Summer are based in North Lincolnshire. They put their own unique spin on popular and lesser know songs by a variety of artists and also perform their own material.</p>
        <p align="justify" class="pagetext">They can be regularly seen performing live in a variety of venues around the county and are building up a strong fanbase on the local music scene.Covering a variety of artists and playing a mix of genres, Endless Summer are based in North Lincolnshire. They put their own unique spin on popular and lesser know songs by a variety of artists and also perform their own material.</p>
        <p align="justify" class="pagetext">They can be regularly seen performing live in a variety of venues around the county and are building up a strong fanbase on the local music scene.END OTEXT</p>
        </div>
        <div id="rightcol"></div>
    -----------------------------------------
    CSS:

    Code:
    #leftcol {
    	background-image: url(layout/left/leftbrd.jpg);
    	background-repeat: repeat-y;
    	float: left;
    	height: 448px;
    	width: 20px;
    }
    
    #centercol {
    	width: 780px;
    	float: left;
    	background-color: #FFF;
    	height: 100%;
    	background-repeat: repeat-y;
    }
    
    #rightcol {
    	background-image: url(layout/right/rightbrd.jpg);
    	background-repeat: repeat-y;
    	float: left;
    	height: 448px;
    	width: 20px;
    }
    -----------------------------------------

    I hope I've provided enough information for someone to give me a solution. I will point out this my first attempt at a site using DIV tags and CSS layout, so I'm very new to all the terms used.


    If you want to see the page in context it's here:

    http://www.endlesssummer.me.uk/abouttest.html

    The CSS file is here:

    http://www.endlesssummer.me.uk/layouttest.css

    This is how the page should look (this page has content that currently fits in with the image sizes): http://www.endlesssummer.me.uk/about.html

    Thanks in advance for any help.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    276
    IMHO, the mistake you made was in using "vertical" images for your left/right drop-shadow borders.
    You need to use a "horizontal" slice of the width of your content area to get it to do what you want. Take a look at the 2nd example HERE [considered the "harder" method] to see what I mean.

    so, you wouldn't need the #leftcol/#rightcol.....just use the new "horizontal" image as background for the content area [where the text will be]. and your #top-about and #footer will be the top/bottom sections of your CSS rounded corners 'box'.
    and you will probably want/need to use some top/bottom padding to "fill in" the extra space above/below your text, so, it all fills in correctly for you.
    Last edited by DonR; August 11th, 2013 at 01:01 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    3
    Rep Power
    0
    Thanks for the reply, but that really does seem like starting all over again and I'm convinced there must be a simpler solution that I'm just missing.

    I really don't want to start all over again, as it's taken me hours to get to this point already. If there's no easy solution, I'll just revert to changing the image sizes each time as that doesn't take too long, whilst not ideal.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    276
    I don't see how you would call it "starting all over again".
    All, you need to do is get rid of #leftcol/#rightcol and those left/right border images and use my attached image that I created for you [using the "about.jpg" as template] and set the background image for #centercol to the attached image with a repeat-y and maybe add a little top/bottom padding to "fill-in" any top/bottom gaps between #centercol and your #top-about and #footer. [and make sure you give the 820px width].

    also, this same image can be used for any of your other pages that are going to use this same concept.
    Attached Images
    Last edited by DonR; August 11th, 2013 at 01:52 PM.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    3
    Rep Power
    0
    DonR

    Many many thanks for your reply and the attached image. You're a star!

    I used it and your instructions to update the page and it appears to work just as I want. I just need to tidy up the CSS and apply the new layout to all the pages and everything should be fine.

    Thanks again, you've been a big help.

IMN logo majestic logo threadwatch logo seochat tools logo