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.



from CSS-Tricks http://bit.ly/2RWIssq

Comments

Popular posts from this blog

20 Free Professional Resume Cover Letter Format Templates for Jobs 2020

How to Create Gantt Charts in PowerPoint With PPT Templates

32+ Professional PowerPoint Templates: For Better Business PPT Presentations