With CSS, you can control the background of elements. You can set a <\/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 If we leave it like that, See how 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 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 […]<\/p>\n","protected":false},"author":3,"featured_media":266936,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1083,1220,1384,1381],"class_list":["post-266396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-background","tag-background-image","tag-css-basics","tag-multiple-backgrounds"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"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","author":"Chris Coyier","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 "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":265404,"url":"https:\/\/css-tricks.com\/css-basics-using-fallback-colors\/","url_meta":{"origin":266396,"position":1},"title":"CSS Basics: Using Fallback Colors","author":"Chris Coyier","date":"February 13, 2018","format":false,"excerpt":"Something you very much want to avoid in web design is unreadable text. That can happen when the background color of an element is too close or exactly the color of the text. For instance: .header { background-color: white; color: white; } Which could lead to text that's there, but\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/houseplants-fallback-bg.gif?fit=601%2C301&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/houseplants-fallback-bg.gif?fit=601%2C301&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/houseplants-fallback-bg.gif?fit=601%2C301&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":276347,"url":"https:\/\/css-tricks.com\/apply-a-filter-to-a-background-image\/","url_meta":{"origin":266396,"position":2},"title":"Apply a Filter to a Background Image","author":"Chris Coyier","date":"October 2, 2018","format":false,"excerpt":"You can apply a filter to an entire element quite easily with the filter property. But what if you want to apply a filter just to the background of an element? It's weirdly tricky. There are CSS properties that specific to backgrounds, like background-blend-mode \u2014 but blending and filters are\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/background-filter.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/background-filter.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/background-filter.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/background-filter.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/background-filter.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":164318,"url":"https:\/\/css-tricks.com\/basics-css-blend-modes\/","url_meta":{"origin":266396,"position":3},"title":"Basics of CSS Blend Modes","author":"Chris Coyier","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 "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":268607,"url":"https:\/\/css-tricks.com\/solved-with-css-colorizing-svg-backgrounds\/","url_meta":{"origin":266396,"position":4},"title":"Solved with CSS! Colorizing SVG Backgrounds","author":"Una Kravets","date":"March 30, 2018","format":false,"excerpt":"This post is the first in a series about the power of CSS. Article Series: Colorizing SVG Backgrounds (this post)Dropdown MenusLogical Styling Based On the Number of Given Elements CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we\u2019re seeing\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/icon-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/icon-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/icon-pattern.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/icon-pattern.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/icon-pattern.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":282018,"url":"https:\/\/css-tricks.com\/multiple-background-clip\/","url_meta":{"origin":266396,"position":5},"title":"Multiple Background Clip","author":"Chris Coyier","date":"January 30, 2019","format":false,"excerpt":"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.\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/stefanjudis-logo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/stefanjudis-logo.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/stefanjudis-logo.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/stefanjudis-logo.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/stefanjudis-logo.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/266396","targetHints":{"allow":["GET"]}}],"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}]}}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>\nbody {\r\n background-color: red;\r\n background-image: url(pattern.png);\r\n}<\/code><\/pre>\nbody {\r\n background-image: \r\n url(image-one.jpg),\r\n url(image-two.jpg);\r\n}<\/code><\/pre>\nimage-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>\nbody {\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>\nbackground-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\n
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