Content on image/two bgs in div

[Robyn]

Check out my website newwebsite.robertcity.com

I'm trying to modify the footer a bit.

You see the image at the bottom? I'm wanting to somehow get it so that the content above goes 'into' the white 'area' of the image. But the problem I see is that I can't make it have two backgrounds [one for the main image in the center, and one for the bg 'behind' the image], and if I have an image in the center, the content can't go over it anyway.

So how might I succeed in doing said task?

[Jordan]

Adding the red made it work for me in FireFox 4. If you want more than one background for the same div, just add a parent div or a child div that consumes the exact same space and apply the other background to it. In your case you already had a wrapper div that was perfect since it allows the image to span across the full page width, and then the inner div forces the text to only span within the white space of the image.

#body {
        padding:10px 10px;
        padding-bottom: 20px;
        background-image: url("./images/footer-bg.png");
        background-position: bottom center;
        background-repeat: no-repeat;
}

[Robyn]

Check it again.

How can I have ONE more background added? This one being the background that will be behind the bottom image, which the content is now over?

[Jordan]

Have you tried adding it to #content? It doesn't have a background yet, but if it's not the right width then you just need to add one more div in there that has the width that you want.

[Robyn]

I think I had success!

[Jordan]

Very nice, it looks good.

[Robyn]

Awesome!

Only, see the text at the bottom? Copyright and then the menu links? I'm trying to remember how to create a css rule for the fonts, but I don't think you can make a div from the font tag, can you?

I'm trying to get the copyright text aligned left, the menu text aligned right.

[Jordan]

To get something left and right aligned, you need to use the float property.

Instead of this.
<div id="copyright"><div id="cprcontent"><font size="3">Copyright 2011 RobertCity.com</font> <font align="right" size="3">Home - About - My Games - My Videos - Blog - Forum - Contact</font></div></div>

You'd want something like this (not tested). You should also set the font sizes and other attributes within the style tag. The font tag has been deprecated (meaning it's old and is no longer standard).

<div id="copyright">
    <div id="cprcontent">
        <span style="float: left;">Copyright 2011 RobertCity.com</span>
        <span style="float: right;">Home - About - My Games - My Videos - Blog - Forum - Contact</span>
    </div>
</div>

[Robyn]

Awesomeness!

The only problem I have now is if the content does not go below the page, then the footer images comes up. However, I can compromise that by not having "short" content, or putting "space" below the content.