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.

Not sure if what you're trying to do is possible, but it seems like it should be as it would make sense to be able to specify the background-size property for each image. Only think I can think to do is place a div with width & height 100% and place your second background image on that div. — Billy Moat
– Billy Moat, Commented Jul 13, 2012 at 10:32
This page suggest that it should work: css3.info/preview/background-size ---- #examplen { width: 580px; height: 200px; background-image: url(img/sheep.png), url(img/sheep.png), url(img/betweengrassandsky.png); background-repeat: no-repeat; background-position: 20px 100px, 400px 50px, center bottom; background-color: #EEE; background-size: 70px, auto, cover; } — Billy Moat
– Billy Moat, Commented Jul 13, 2012 at 10:37
Okey I also think it should be posible, I have thought about your idea but I am just trying to avoid the second div if it is posible.. thx! — Mattias
– Mattias, Commented Jul 13, 2012 at 10:37

Greg · Accepted Answer · 2013-11-12 14:52:16Z

116

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/

edited Nov 12, 2013 at 14:52

Greg

22k17 gold badges89 silver badges110 bronze badges

answered Jul 13, 2012 at 10:40

Billy Moat

21.1k7 gold badges47 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Vattuone Over a year ago

Of course, you don't want to have a single small image cover the whole background, you want to repeat it at the proper size! Thanks so much for this!

Gopherkhan Over a year ago

It might be maybe something broken in the latest version of chrome, but the background-size and position properties aren't doing anything for me. Comma separated backgrounds work just fine though.

JVK Over a year ago

@Gopherkhan I know this is a late reply but just in case. I had a similar issue with background-size, the issue was with using inherit or initial when doing multiple sizes. Using auto instead fixed the issue for me. A bit more of an explanation here

Collectives™ on Stack Overflow

Multiple backgrounds with different background-size

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related