How to add multiple images in background body

Question

So I wanted to make a site where I could have the background have a header image of say 600px image, that being the "site background," then having the rest be a tiled image, as well as that I wanted the header background to adapt to movement, like background-position: center; CSS property.

I looked at W3 but their documentation is confusing. here

This is some code I tried:

background: url(bg.png) top, url(tile.png) repeat;

But I'm not sure how I'd be able to add background-position & height into that.

good old google: css background multiple images
result: http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css — emvidi, Nov 25 '16 at 14:18
THAT ISN'T THE W3 PAGE ... sorry for mayus but this is big xd — DaniP, Nov 25 '16 at 14:19

score 1 · Answer 1 · answered Nov 25 '16 at 14:20

Short example:

.web {
    width: 800px;
    height: 1000px;
    background-image: url(https://dummyimage.com/800x600/000/fff), url(https://dummyimage.com/800x300/555/fff);
    background-size: 300px 200px, 300px 100px;
    background-repeat: no-repeat, no-repeat;
    background-position: center 0px, center 200px;
}

<div class="web"></div>

How to add multiple images in background body

1 Answers1