Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Multiple backgrounds with background-size

Multiple Backgrounds With Background-size

Multiple backgrounds with background-size

Problem

I am trying to create a page Background with an overlay using css3'" rel="tag">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.

Problem courtesy of: Mattias

Solution

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/

Solution courtesy of: Billy Moat

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Multiple backgrounds with background-size

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×