SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image to stretch to bottom of page

    Hi there

    I am trying to get a background image of a div to stretch to the the bottom of a page but it just keeeps stopping at the end of the content. I have tried all sorts of variations and just can't get it to work.

    Here is the page in question:
    http://www.blackdownbeerfestival.com/index.php

    The image in question is:

    http://www.blackdownbeerfestival.com/images/mainBg.gif

    Any help much appreciated.

    Thanks

    Paul
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like you're talking about IE as it stretches in FF.

    Try removing that clearfooter div and just add clear:both to the footer itself.

    You might also want to check it in FF as the footer has a set height and disappears when the text is increased in size. If it needs a height then use ems.

    There's also a couple of errors there which won't help.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. Unfortunately it doesn't stretch in my version of Firefox - I have a large monitor so it may not be visible on smaller monitors but essentially the background stops before it gets to the footer.

    I will try your suggestions and see if that helps.

    I would be interested to know what errors you have spotted.

    Many thanks

    Paul
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  4. #4
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a better link to illustrate the problem

    http://www.blackdownbeerfestival.com/test/
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the column background works as intended if it is moved to #outer:
    Code:
    #outer{
    	min-height:100%;
    	background:#fff url(../images/mainBg.gif) repeat-y;
    	width:967px;
    	margin:auto;
    	margin-bottom:-36px;
    	text-align:left;
    }
    
    
    #main {
        background: url(../images/mainBg.gif) repeat-y;
        float:left;
        width:960px;
        text-align: left; 
        padding-top: 0px; 
        padding-left:0; 
        min-height:100%;
        height:auto;
        }
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks erik

    Problem is that outer has its own different background image too.
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Problem is that outer has its own different background image too.
    You can really only have one 100% high element and that's the one that you must use if you want images to go to the bottom. This has to be the first element on the page and is the only one that in reality goes to the bottom.

    All you need to do is simply to combine both of your images images into one single image and use that on the outer instead. You create all columns and all shadows in one go on one element. You can just rub out the bits that you don't want to see when you overlay content on top and use a background colour (as in the header).

    You cannot nest 100% high elements inside an outer that has a min-height set because that means the height property is auto and you cannot base percentages on an element with height:auto.

    Here's an example where all columns are held on the one outer.

    http://www.pmob.co.uk/temp/3col-centred-template10.htm

    (I put the shadows on the body itself but made sure that part of the shadow goes under the layout to avoid the 1px background jog. The shadows could have gone on the main image if I hadn't been messing about with different coloured backgrounds.)

  8. #8
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah thanks Paul - that explains why I was having no joy in getting this to work. I have now done what you suggested and it is behaving much better

    http://www.blackdownbeerfestival.com/index.php

    Thanks to everyone for helping me get this fixed.

    Cheers

    Paul
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to put the clearfooter back in place for the footer technique to work and to make firefox extend properly.

    Code:
    #clearfooter{height:36px;clear:both;}
    Code:
            <div id="mainRHS">
                <h1>Sponsors</h1>
            </div>
        </div>
    <div id="clearfooter"></div>
    </div>
    <div id="footer">
        <p><a href="http://www.mediakitchen.co.uk" title="Website Design and Development by MediaKitchen 2008" target="_blank">Website Design and Development by MediaKitchen 2008</a></p>
    </div>
    </body>
    </html>
    You also need the 100&#37; height for IE.

    Code:
    #outer{
        min-height:100%;
        background:#fff;
        background-image: url(http://www.blackdownbeerfestival.com/images/bodyBg.gif);
        background-repeat: repeat-y;
        width:967px;
        margin:auto;
        margin-bottom:-36px;
        text-align:left;
    }
    * html #outer{height:100%}
    Add a right shadow to the footer to complete the illusion.

  10. #10
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops sorry didnt realise you had replied. I did sort out the footer in the meantime (well it looks ok in Firefox and IE 6).

    However one annoying thing is when a page is loading, you see the background image in the header section.

    Is there any way to prevent this?

    To see what I mean, go to http://www.blackdownbeerfestival.com/ and then navigate to different pages.

    Cheers

    Paul
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    My connection is quite quick so I don't really see anything other than a quick flash. For slow connections you could make sure the header also has a background colour which will be drawn first and rub out the column shadows straight away which will look a little better.

  12. #12
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. Yeah I did already give it a background colour. Not a show stopper so I am happy to leave it as it is especially as I am doing this site for free as a gift to the local community
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk


Bookmarks

Posting Permissions

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