Multiple Background Clip

You know how you can have multiple backgrounds?

body { background-image: url(image-one.jpg), url(image-two.jpg); }

That’s just background-image. You can set their position too, as you might expect. We’ll shorthand it:

body { background: url(image-one.jpg) no-repeat top right, url(image-two.jpg) no-repeat bottom left; }

I snuck background-repeat in there just for fun. Another one you might not think of setting for multiple different backgrounds, though, is background-clip. In this linked article, Stefan Judis notes that this unlocks some pretty legit CSS-Trickery!

Direct Link to ArticlePermalink

The post Multiple Background Clip appeared first on CSS-Tricks.