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

CSS3: multiple backgrounds. with colors?

CSS3: multiple backgrounds. with colors?

Problem

if i try to apply multiple Background images, works great:

.selector{  
     background-image: url(image1.png), url(image2.pnng);
     background-position: 0 -50px, 0 -100px;
}

the problem comes when i try

.selector{  
     background-color: blue, red;
     background-position: 0 -50px, 0 -100px;
}

that simply won't apply any background color at all..

What am i missing here?

Problem courtesy of: Toni Michel Caubet

Solution

You can't have more than one background-color.

You can either use images, or a CSS gradient to achieve your desired result.

Assuming your desired result is two colours meeting in the middle, look at this for a gradient example.

Solution courtesy of: thirtydot

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

CSS3: multiple backgrounds. with colors?

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×