{"id":155091,"date":"2013-11-04T05:41:00","date_gmt":"2013-11-04T12:41:00","guid":{"rendered":"http:\/\/css-tricks.com\/?p=155091"},"modified":"2013-11-22T19:45:41","modified_gmt":"2013-11-23T02:45:41","slug":"tinted-images-multiple-backgrounds","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/tinted-images-multiple-backgrounds\/","title":{"rendered":"Tinted Images with Multiple Backgrounds"},"content":{"rendered":"

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<\/a>. If we layer a transparent color over an image, we can “tint” that image. But it’s not quite as obvious as you might suspect.<\/p>\n

<\/p>\n

My first intuitive guess at doing this would be like this:<\/p>\n

\/* Warning: this doesn't work *\/\r\n.tinted-image {\r\n  background: \r\n    \/* top, transparent red *\/ \r\n    rgba(255, 0, 0, 0.25),\r\n    \/* bottom, image *\/\r\n    url(image.jpg);\r\n}<\/code><\/pre>\n
Unfortunately, that’s not valid. I’m not entirely sure why. A while back when I whined on Twitter about it<\/a> I got a variety of ideas\/reasons\/excuses. None of them rang quite true for me. It’s true you cannot comma-separate background-color<\/code>, but I don’t think that’s relevant here as I’m comma separating the background<\/code> shorthand not specifically background-color<\/code> (not to mention ordering those values the other way around works fine). <\/p>\n
I suspect the real reason that was decided is because it would be too easy for authors to screw up. background: green, url(image.jpg); would “fail” in a sense in that it would just flood the background green. Forcing the color to be last makes the color kind of like a “fallback” rather than a layer like any other. <\/p>\n
Unfortunately we also can’t simply leave the color at the bottom and adjust the opacity of the image to allow some of that color to come through, because background-opacity isn’t a thing. (Although you can kind of fake it<\/a>.)<\/p>\n
There is a way though!<\/p>\n
Instead of using a transparent flood color using rgba() or hsla(), we can use a gradient. Gradients are technically background-image<\/code>s and thus not subject to the rule where they can’t come first (be top) in the stacking order. <\/p>\n
\/* Working method *\/\r\n.tinted-image {\r\n  background: \r\n    \/* top, transparent red, faked with gradient *\/ \r\n    linear-gradient(\r\n      rgba(255, 0, 0, 0.45), \r\n      rgba(255, 0, 0, 0.45)\r\n    ),\r\n    \/* bottom, image *\/\r\n    url(image.jpg);\r\n}<\/code><\/pre>\n
See the Pen Tinted Image w\/ Multiple Backgrounds<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a><\/p>\n
Hey, whatever works, right?<\/p>\n","protected":false},"excerpt":{"rendered":"
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 as you might suspect.<\/p>\n","protected":false},"author":3,"featured_media":0,"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],"tags":[478],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":266396,"url":"https:\/\/css-tricks.com\/css-basics-using-multiple-backgrounds\/","url_meta":{"origin":155091,"position":0},"title":"CSS Basics: Using Multiple Backgrounds","date":"February 14, 2018","format":false,"excerpt":"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); } Here's an example where I'm using an SVG\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/multiple-bg-images.jpg?fit=607%2C272&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":318708,"url":"https:\/\/css-tricks.com\/more-control-over-css-borders-with-background-image\/","url_meta":{"origin":155091,"position":1},"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":276347,"url":"https:\/\/css-tricks.com\/apply-a-filter-to-a-background-image\/","url_meta":{"origin":155091,"position":2},"title":"Apply a Filter to a Background Image","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 "Article"","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},"classes":[]},{"id":8596,"url":"https:\/\/css-tricks.com\/stacking-order-of-multiple-backgrounds\/","url_meta":{"origin":155091,"position":3},"title":"Stacking Order of Multiple Backgrounds","date":"February 25, 2011","format":false,"excerpt":"Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it's easiest\/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn't obvious while looking at\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333595,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/","url_meta":{"origin":155091,"position":4},"title":"A Complete Guide to Custom Properties","date":"April 27, 2021","format":false,"excerpt":"Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as \"CSS Variables\" but that's not their real name.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":190610,"url":"https:\/\/css-tricks.com\/design-considerations-text-images\/","url_meta":{"origin":155091,"position":5},"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":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/155091"}],"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=155091"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/155091\/revisions"}],"predecessor-version":[{"id":155167,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/155091\/revisions\/155167"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=155091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=155091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=155091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}