Support » Fixing WordPress » multiple background images???

  • Hi Guys, New to the forum and really very basic user and self taught, so very sorry if this question is basic but i don’t seem to be able to get an idea from anywhere.

    I want to have background image at the top and a background image at the bottom – clearly it is there but the CSS only recognise the one background command?

    Code i am using

    #main {
    padding: 15px;
    background: #fff;
    background-image:url(‘http://www.firstprotein.co.uk/protein/wp-content/themes/CoolMax/images/top-960-container.jpg’); background-repeat:repeat-y; background-position:top center;
    background-image:url(‘http://www.firstprotein.co.uk/protein/wp-content/themes/CoolMax/images/bottom-body.png’); background-repeat:repeat-x; background-position:bottom center;
    }

    my site is Located here

    Help would be much appreciated, many thanks

    Probably very simple, might not be??

Viewing 7 replies - 1 through 7 (of 7 total)
  • Actually that’s a lot harder than it should be. You can’t use two background images on one div, so you would need to put an extra div in main wrapping the content and sidebar divs and give that the second background image.

    Any given element on a page can have only one background image. Whichever one is declared last should be the one that shows up.

    If you want to apply a background image at the end of your page, you will have to create a new element to contain it. For example, at the bottom of your #main container, insert a #footer container, to which you can apply you second background.

    hi – thanks for this – i sort of tried the new element – didn’t really work, going to have research how to do this – any pointers for a completely green individual?

    Thanks again!

    Don’t name the new element id=”footer”, you already have one of those on your side… try naming it id=”the-content-footer” and then apply you css like this:

    #the-content-footer{
        width:100%;
        height: -- your background height --
        clear:both;
    }

    Hi Towonder – thank you.

    Problem is i have no idea where to actually put this, i am guessing in the page template?

    been fiddling with it and rolling it back with every unsuccessful attempt – lol – i am not a developer just someone playing with a site really – would love to know, and i am slowley getting there?

    is there a step by step guide located somewhere?

    Cheers once again

    Hey OKLander,

    the page template is a good start… and you should put int under this div-tag:

    <div id="sidebar-secondary">...</div>

    This is basic HTML… here’s a good set of tutorials and documentation to get you started: http://htmldog.com/guides/htmlbeginner/

    thank you

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘multiple background images???’ is closed to new replies.