Home > Designing, Others > Multiple Background Clip

Multiple Background Clip

January 30th, 2019 Leave a comment Go to comments

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 Article — Permalink

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

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.