Multiple backgrounds with different background-size

I am trying to create a page background with an overlay using css3's multiple background support;

html, body {
  background: url('https://github.com/jaysalvat/vegas/raw/master/overlays/01.png') repeat,
              url('http://farm8.staticflickr.com/7260/7502004958_595bf03fbf_z.jpg') top left no-repeat;
  background-size: cover;
}

I want the photo background image to "cover" the page and the overlay to be small (3*3px) repeating over the hole page.

The above example gives me http://jsfiddle.net/tpmD4/ (also the overlay covering the page).

How can I fix that?

When I try to specify the background-size for both of the images (background-size: 3px 3px, cover;); then the image background doesn't cover, but the overlay works.

Here you go:

html, body {
    background-image: url(01.png), url(z.jpg);
    background-repeat: repeat, no-repeat;
    background-position: 0 0;
    background-size: 3px 3px, cover;
}

http://jsfiddle.net/tpmD4/6/

Multiple backgrounds with different background-size

Related

Recent Posts