Background image a set distance from bottom

HTML & CSS
1

Hi all,

I’m been working on this layout for a quite a while now and I had it working fine when the content wasn’t any bigger than the window, but when it was the footer moved away and the side graphics didn’t go with it.

Sorry, I realise that doesn’t make much sense (I’ll blame my lack of sleep!).

Firstly, the website: http://www.f5web.co.uk/wpw/

Unfortunately in my attempt to make the 2 side columns (#left, #right) stretch with the content column (Content) I’ve now broken the footer (#foot) always being at the bottom of the content. :confused:

Basically what I need is for the green curves at the side to seperate at the point they meet the sides of the content column, when the content stretches further than 1 window’s height, with the bottom parts sticking just above the footer image - creating a fluid layout.

I originally had #left and #right outside the Content div, with the 3 of them just floated in a row. I then had the lower left curve as the background of #left and the lower right curve as the background of #right. This layout didn’t extend the height of #left and #right with Content so the background images wouldn’t move down.

After reading some of the threads and FAQs regarding equal height columns, I rearranged things, and in doing so realised I could have the lower curves as one background image, as the content div is fixed width. My thinking was that if I set this background image for the Content, wrapped #left and #right within it and then floated #head and #maincontent between them, then Content would always be as long as the longest div within it. At first this didn’t work as the divs within in it just stuck out.

I then changed Content to position: absolute - to be honest I’m not really sure why but it sort of worked. The problem then was that the background image was under the footer (http://www.f5web.co.uk/wpw/index2.html).

Upon extending the text I then discovered the problem with the footer, tried removing position:absolute; but found that didn’t help.

So now I’m tired, and to be honest have lost track of what I’ve done and am struggling!

I think if I can get the footer problem sorted, then I just need to set the Content background image to be 94px from the bottom - if that’s possible (Apologies for what I’ve just realised is an extremely long winded way to get to my original question!)

Can anyone please help?

Thanks in advance,
Tino

2

Hi Tinohead, welcome to SitePoint!

To be honest, I can’t follow all that. Could you post in image of the result you want?

3

Sorry, I had a feeling that might be the case! :blush:

This is how is should look with a small amount of content:

And this is how it should stretch with content:

Does that help explain it?

4

Edit: Sorry this is how it should look with a small amount of content:

5

Yes, definitely. :slight_smile: I’ll take a look again and post back in a while.

6

Many thanks, and thanks for the welcome to the site - I’ve been a long term visitor, first time poster :slight_smile:

I’m off to bed now but I’ll have a look at your response in the morning.

7

Hi,
I just looked through code and I see that you are trying to do a sticky footer layout. The sample images you just posted confirm that too.

Have a look through the FAQ for info on sticky footers.
FAQ : How do you put a sticky footer at the bottom of the window?

When you read through it you will see that the “min-height fast hack” method you are using is not recommended.

#container {
    width: 1024px;
    margin: 0 auto;
    position:relative; /* needed for footer positioning*/
[COLOR=Red]    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */[/COLOR]
}

Most importantly you need to get rid of the absolute positioning on the footer and it should sit outside of the #container div on it’s own in the html.

Have a look at this demo - (View Page Source)
http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm

If all the Opera and IE8 bug fixes are confusing to you it can also be done with a non-semantic dummy float to fix those two browsers.
http://www.css-lab.com/demos/stickfoot/stickfoot-2.html

Get that AP off your footer for starters though and clear the floats above.
When you get it out of the container div you will need to set a width and auto margins just like the container div.

#foot {
[COLOR=Blue]    clear:both;
    width: 1024px;
    margin: 0 auto;[/COLOR]
    height: 94px;
    background: url(uploads/images/foot.jpg) top left no-repeat #fff;
[COLOR=Red]    /*position: absolute;
    bottom: 0;*/[/COLOR]
}
8

Personally, I think I would use just two background images. I would have an outer wrapper and an inner wrapper. On the outer wrapper I would put the whole header as one image (well, the green outer part, as the logo and menu I’d do separately). On the inner wrapper I’d place the whole bottom green part as one whole image.

Then I’d put a fair bit of padding on the inner wrapper to nest the text nicely inside the images.

To stop the bottom image overlapping the top imag on very short pages, you could set a min-height.

Does that make sense?

9

Ok, I’ve tried that but unfortunately everything is now all over the place - http://www.f5web.co.uk/wpw/index2.html.

I’ve more than likely missed something obvious because it’s so late so I’m definitely going to bed now and I’ll have another look at it in the morning.

Thanks for the responses so far :tup:

10

Sorry Ralph but I can’t get my head round what you mean - but that could be the afore mentioned lack of sleep so I’ll leave it until the morning.

Thanks,
Tino

11

My suggestion was not based around having a sticky footer, which I didn’t think you were asking for. If you are, stick with Ray’s suggestions. My way would be much simpler, but may not be what you are looking for.

Perhaps read my comments again when you aren’t so tired, as it’s pretty simple. I would have some html like this:


<div id="wrapper-outer">
    <div id="wrapper">
    </div>
</div>

On the #wrapper-outer I would have all the green bits at the top as one background image.

On the #wrapper I would have all the green bits at the bottom as one background image.

12

Hi Ralph,
I agree with your approach and it would be much easier. :wink:
I based my reply on what I saw in Tino’s code with the min-height:100% on the container.

I don’t really think a sticky footer will be beneficial here. The reason being is that viewers with larger monitors will be seeing the page stretched apart on pages with minimal content. Viewers with smaller monitors will never even see a sticky footer effect.

On a smaller monitor you will be getting a scrollbar before you even get it all pieced together.

13

I always look for the easy way out, as it’s all my little brain can handle. I leave the sticky footers et al. to the smart guys like you. :wink:

14

Ok, after a bit of sleep that makes a lot more sense, and I can see how it works. So I’ve started from scratch and put this together http://www.f5web.co.uk/wpw/index3.html

The bottom half seems to work but the top half isn’t showing.

I’ve put a green border round #container (aka #wrapper) and a red border round #container-outer (aka #wrapper-outer) to show that the problem seems to be that the content isn’t stretching #container-outer, it’s just a flat div at the top. I also had this problem initially with #container but by adding ‘position:absolute’ I fixed it - to be honest the ‘position’ function is a weak point with me so I’ve no idea why that worked, or whether it was the right way to fix the problem.

Any further help greatly appreciated.

Many thanks,
Tino

15

Hi,

You’ve set the inner container to have a white background so it rubs out the image in the parent.:slight_smile:

You need to remove the position:absolute and then clear your floats. It also looks like your widths are all out of sync with the images.

The layout needs a minimum height because you have coloured the white portion as white and it would have been better as transparent so that it doesn’t rub the image above out.

Rolling all the above into an example should roughly look like this.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style3.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* CSS Document */

html, body {
    font-family: "Arial Rounded MT Bold", Verdana, sans-serif;
    font-size: 12px;
    color: #666;
    margin: 0;
    padding: 0;
}
#container-outer {
    width: 927px;
    margin: 0 auto;
    background: url(http://www.f5web.co.uk/wpw/uploads/images/topback.jpg) 50&#37; 0 no-repeat #fff;
    /*border: 1px solid #f00;*/
    padding:95px 0 0;
}
#container {
    width: 750px;
    margin: 0 0 0 90px;
    background:url(http://www.f5web.co.uk/wpw/uploads/images/bottomback.jpg) bottom center no-repeat;
    /*position: absolute;*/
    padding:0 72px 107px 40px;
    overflow:hidden;/* clear floats*/
    min-height:750px;
}
* html #container {
    height:750px;
}
#content {
    width: 100%;
    text-align: left;
}
#head {
    width: 703px;
    background: url(http://www.f5web.co.uk/wpw/uploads/images/logotrim.jpg) top right no-repeat #fff;
    float: left;
    padding: 0 0 0 47px
}
#menu {
    height: 20px;
    margin: 15px 0 0 0;
    padding: 20px 0;
    font-size: 16px;
    color: #009244;
}
#maincontent {
    background: url(http://www.f5web.co.uk/wpw/uploads/images/dog.jpg) bottom right no-repeat #fff;
    float: left;
    padding: 15px 0 5px 47px;
    width: 699px;
}
#maincontent p {
    width: 400px;
    line-height: 1.4em;
}
h1 {
    font-size: 30px;
    font-weight: normal;
    margin: 10px auto 0 auto;
    color: #D7DF20;
}
.green {
    color: #0B9344;
}
</style>
</head>
<body>
<div id="container-outer">
    <div id="container">
        <div id="content">
            <div id="head"> <img src="http://www.f5web.co.uk/wpw/uploads/images/weblogo.jpg" width="350" height="124" alt="" />
                <div id="menu"> <img src="http://www.f5web.co.uk/wpw/uploads/images/pawicon.jpg" width="25" height="18" alt="" />home<img src="http://www.f5web.co.uk/wpw/uploads/images/pawicon.jpg" width="25" height="18" alt="" />services<img src="http://www.f5web.co.uk/wpw/uploads/images/pawicon.jpg" width="25" height="18" alt="" />gallery<img src="http://www.f5web.co.uk/wpw/uploads/images/pawicon.jpg" width="25" height="18" alt="" />contact </div>
                <!--menu-->
            </div>
            <!--head-->
            <div id="maincontent">
                <h1>Happy trails for waggy tails</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                <img src="http://www.f5web.co.uk/wpw/uploads/images/piechart.jpg" width="150" height="133" alt="" />
                <h1 class="green">We can help you get the balance right</h1>
            </div>
            <!--maincontent-->
        </div>
        <!--content-->
    </div>
    <!--container-->
</div>
<!--container-outer-->
</body>
</html>
16

Thanks you Paul - I’m just about there I think!

I’ve redone the background images as .png files with the white areas transparent and removed the min-height (am I reading right that the only reason that was included is because the lack of transparency?)

The only problem now is the gap between the bottom edge of the upper green section, and the top of the drawing of the woman and the dogs. I need to redo the topback.png image with her head and the right hand dog added on, but there shouldn’t be any gap there?

Regards,
Tino

17

Scratch that, problem solved, I noticed you’d added padding to the top of #container-out so I reduced that and made the corner of the logotrim image transparent so as not to cover the rounded edge

18

For future reference Paul and so I understand what the problem was (I always prefer that to just being told the solution :)), what was causing #container-outer to be flat at the top? Was it overflow:hidden that fixed it? And if so, why?

Many thanks for your help.

19

No, that’s to stop the lower and upper green backgrounds overlapping if there is not enough content to push them apart naturally, so you should keep it there.

20

Ah ok! I’ve reinstated that, thanks.