Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
multiple backgrounds

5 Articles
{
,

}
Direct link to the article Nested Gradients with background-clip
background-clip buttons gradients multiple backgrounds

Nested Gradients with background-clip

I can’t say I use background-clip all that often. I’d wager it’s hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis, which coincidentally was itself a learning-response post to …

Avatar of Chris Coyier
Chris Coyier on Aug 28, 2019 (Updated on Aug 29, 2019)
Direct link to the article Managing Multiple Backgrounds with Custom Properties
background background-image custom properties multiple backgrounds

Managing Multiple Backgrounds with Custom Properties

One cool thing about CSS custom properties is that they can be a part of a value. Let’s say you’re using multiple backgrounds to pull off a design. Each background will have its own color, image, repeat, position, etc. It …

Avatar of Chris Coyier
Chris Coyier on Jul 15, 2019 (Updated on Jul 16, 2019)
Direct link to the article Multiple Background Clip
background background-clip multiple backgrounds

Multiple Background Clip

Direct Link

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) 
…
Avatar of Chris Coyier
Shared by Chris Coyier on Jan 30, 2019
Direct link to the article Drawing Images with CSS Gradients
gradients multiple backgrounds pseudo elements

Drawing Images with CSS Gradients

What I mean by “CSS images” is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Some techniques I’ve seen …

Avatar of Jon Kantner
Jon Kantner on Jun 25, 2018
Direct link to the article CSS Basics: Using Multiple Backgrounds
background background-image css basics multiple backgrounds

CSS Basics: Using Multiple Backgrounds

With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both:

body {
  background-color: red;
  background-image: 
…
Avatar of Chris Coyier
Chris Coyier on Feb 14, 2018 (Updated on Oct 27, 2018)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top