treehouse : what would you like to learn today?
Web Design Web Development iOS Development

background-image and another image

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

    ?
  • 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.
  • Ah, ok that's the syntax i was needed...
    thank you.
  • your welcome friend