Grow your CSS skills. Land your dream job.

background-image and another image

  • # May 3, 2011 at 5:26 pm

    Hi all,

    Let’s say i have already a bg.jpg as background-image
    and i would like that the image will repeat but not with a #color,
    i would like it to repeat with a little image that i’ve created, can i manage both of them?
    i tried to play with it, but it seems like i could only put just one of them in the same time.

    Any suggestions?

    # May 3, 2011 at 6:16 pm

    Very possible. Multiple Backgrounds and Borders with CSS2

    # May 4, 2011 at 4:15 am

    Well.. in this css there is bunch of things..
    i think i need a shorter and simple code, if anyone can tell me how can i fix it from my code:

    body
    {
    background:url(bg.jpg);
    background-repeat:no-repeat;
    background-position:top;
    background-color:#06385b;

    }

    So as you can see the bg.jpg is my main background – (this one no-repeat)
    After that i would like the bg2.jpg (my second image to repeat)

    ?

    # May 4, 2011 at 5:04 am
    body {
    background:url(bg2.jpg) repeat, url(bg.jpg) no-repeat top center #06385b;
    }

    please note the bg2 image will come first in the list as that is the one you want on top, followed by the larger image. bg2 will repeat across and down, to change use repeat-x or repeat-y.

    the large image wont repeat and be postitioned top center with that colour.

    you can read all about Multiple Backgrounds here by Chris.

    # May 4, 2011 at 7:41 am

    Ah, ok that’s the syntax i was needed…
    thank you.

    # May 4, 2011 at 8:59 am

    your welcome friend

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".