{"id":266396,"date":"2018-02-14T13:53:41","date_gmt":"2018-02-14T20:53:41","guid":{"rendered":"http:\/\/css-tricks.com\/?p=266396"},"modified":"2018-10-27T12:58:05","modified_gmt":"2018-10-27T19:58:05","slug":"css-basics-using-multiple-backgrounds","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-basics-using-multiple-backgrounds\/","title":{"rendered":"CSS Basics: Using Multiple Backgrounds"},"content":{"rendered":"

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

body {\r\n  background-color: red;\r\n  background-image: url(pattern.png);\r\n}<\/code><\/pre>\n
<\/p>\n
Here’s an example where I’m using an SVG image file as the background, embedded right in the CSS as a data URL<\/a>.<\/p>\n
See the Pen background color and image together<\/a> by Chris Coyier  (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
That’s just a single image there, repeated, but we can actually set multiple background<\/a> images if we want. We do that by separating the values with commas.<\/p>\n
body {\r\n  background-image: \r\n    url(image-one.jpg),\r\n    url(image-two.jpg);\r\n}<\/code><\/pre>\n
If we leave it like that, image-one.jpg<\/code> will repeat and entirely cover image-two.jpg<\/code>. But we can control them individually as well, with other background properties.<\/p>\n
body {\r\n  background-image: \r\n    url(image-one.jpg),\r\n    url(image-two.jpg);\r\n  background-position:\r\n    top right, \/* this positions the first image *\/\r\n    bottom left; \/* this positions the second image *\/\r\n  background-repeat:\r\n    no-repeat; \/* this applies to both images *\/\r\n}<\/code><\/pre>\n
See how background-position<\/code> also<\/em> has comma-separated values? Those will apply individually to each image respectively. And then how background-repeat<\/code> has only one value? We could have done two values in the same way, but by using just one value, it applies to both.<\/p>\n
Here’s an example using four separate images, one in each corner, offset by a smidge:<\/p>\n
See the Pen Example of multiple backgrounds<\/a> by Chris Coyier  (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
It’s too bad you can’t rotate or flip background images or else we could have used just one. We can rotate and flip<\/a> entire elements (or pseudo elements<\/a>) though, so in cases like that, we can get away with using a single image!<\/p>\n
See the Pen Flipping Image So You Can Use Just One<\/a> by Chris Coyier  (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
Just a few other things to be aware of here:<\/p>\n
    \n
  1. The stacking order<\/a> of multiple background is “first is on top.”<\/li>\n
  2. Gradients are applied through background-image<\/code>, so they can be used as part of all this. For example, you could set a transparent gradient over a raster image.<\/li>\n<\/ol>\n
    See the Pen Tinted Image w\/ Multiple Backgrounds<\/a> by Chris Coyier  (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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: url(pattern.png); }<\/p>\n","protected":false},"author":3,"featured_media":266936,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4,18],"tags":[1083,1220,1384,1381],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/multiple-bg-images.jpg?fit=607%2C272&ssl=1","jetpack-related-posts":[{"id":155091,"url":"https:\/\/css-tricks.com\/tinted-images-multiple-backgrounds\/","url_meta":{"origin":266396,"position":0},"title":"Tinted Images with Multiple Backgrounds","date":"November 4, 2013","format":false,"excerpt":"The background property in CSS can accept comma separated values. \"Multiple\" backgrounds, if you will. You can also think of them as layered backgrounds since they have a stacking order. If we layer a transparent color over an image, we can \"tint\" that image. But it's not quite as obvious\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":164318,"url":"https:\/\/css-tricks.com\/basics-css-blend-modes\/","url_meta":{"origin":266396,"position":1},"title":"Basics of CSS Blend Modes","date":"February 28, 2014","format":false,"excerpt":"Bennett Feely has been doing a good job of showing people the glory of CSS blend modes. There are lots of designerly effects that we're used to seeing in static designs (thanks to Photoshop) that we don't see on the web much, with dynamic content. But that will change as\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":190610,"url":"https:\/\/css-tricks.com\/design-considerations-text-images\/","url_meta":{"origin":266396,"position":2},"title":"Design Considerations: Text on Images","date":"December 12, 2014","format":false,"excerpt":"I enjoyed Erik D. Kennedy's post 7 Rules for Creating Gorgeous UI (Part 2). In it, his Rule 4 is: Learn the methods of overlaying text on images. I thought we could take a look at all his points, code them up, and note anything that comes up technically. Tinting\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":318708,"url":"https:\/\/css-tricks.com\/more-control-over-css-borders-with-background-image\/","url_meta":{"origin":266396,"position":3},"title":"More Control Over CSS Borders With background-image","date":"August 7, 2020","format":false,"excerpt":"You can make a typical CSS border dashed or dotted. For example: .box { border: 1px dashed black; border: 3px dotted red; } You don't have all that much control over how big or long the dashes or gaps are. And you certainly can't give the dashes slants, fading, or\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/background-borders.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325536,"url":"https:\/\/css-tricks.com\/css-background-patterns\/","url_meta":{"origin":266396,"position":4},"title":"CSS Background Patterns","date":"November 16, 2020","format":false,"excerpt":"Nice little tool from Jim Raptis: CSS Background Patterns. A bunch of easy-to-customize and copy-and-paste backgrounds that use hard stop CSS gradients to make classy patterns. Not quite as flexible as SVG backgrounds, but just as lightweight. Like this: CodePen Embed Fallback Speaking of cool background gradient tricks, check out\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-3.58.15-PM.png?fit=1200%2C916&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":167022,"url":"https:\/\/css-tricks.com\/stripes-css\/","url_meta":{"origin":266396,"position":5},"title":"Stripes in CSS","date":"April 4, 2014","format":false,"excerpt":"Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place. Normal Colored Diagonal Stripes Diagonal stripes are easy to pull off thanks to repeating-linear-gradient(): background: repeating-linear-gradient( 45deg, #606dbc,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/multiple-bg-images.jpg?fit=607%2C272&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/266396"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=266396"}],"version-history":[{"count":12,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/266396\/revisions"}],"predecessor-version":[{"id":278178,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/266396\/revisions\/278178"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/266936"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=266396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=266396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=266396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}