multiple background images??? (8 posts)

  1. OKlander
    Posted 4 years ago #

    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??

  2. LucP
    Posted 4 years ago #

    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.

  3. Nikki Blight
    Posted 4 years ago #

    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.

  4. OKlander
    Posted 4 years ago #

    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!

  5. LucP
    Posted 4 years ago #

    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:

        height: -- your background height --
  6. OKlander
    Posted 4 years ago #

    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

  7. LucP
    Posted 4 years ago #

    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/

  8. OKlander
    Posted 4 years ago #

    thank you

Topic Closed

This topic has been closed to new replies.

About this Topic