Multiple backgrounds with different background-size

Question

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.

Answer 1

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/