{"id":7647,"date":"2021-05-25T18:19:05","date_gmt":"2021-05-25T08:19:05","guid":{"rendered":"https:\/\/wpdevdesign.wpengine.com\/?p=7647"},"modified":"2021-05-25T18:21:09","modified_gmt":"2021-05-25T08:21:09","slug":"background-blend-mode-multiply","status":"publish","type":"post","link":"https:\/\/wpdevdesign.com\/background-blend-mode-multiply\/","title":{"rendered":"background-blend-mode: multiply"},"content":{"rendered":"\n<p>I&#8217;ve recently discovered that setting <code>background-blend-mode: multiply<\/code> to an element that has a background image set makes it appear more vibrant and not washed out.<\/p>\n\n\n\n<p>Before:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-before.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"369\" src=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-before-1024x369.jpg\" alt=\"\" class=\"wp-image-7648\" srcset=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-before-1024x369.jpg 1024w, https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-before-300x108.jpg 300w, https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-before-768x276.jpg 768w, https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-before-1536x553.jpg 1536w, https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-before-800x288.jpg 800w, https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-before.jpg 1728w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>After:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-after.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"369\" src=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-after-1024x369.jpg\" alt=\"\" class=\"wp-image-7649\" srcset=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-after-1024x369.jpg 1024w, https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-after-300x108.jpg 300w, https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-after-768x276.jpg 768w, https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-after-1536x553.jpg 1536w, https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-after-800x288.jpg 800w, https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-after.jpg 1728w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-blend-mode\/\" class=\"rank-math-link\">css-tricks article<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve recently discovered that setting background-blend-mode: multiply to an element that has a background image set makes it appear more vibrant and not washed out. Before: After: css-tricks article.<\/p>\n","protected":false},"author":1,"featured_media":7649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"footnotes":""},"categories":[63],"tags":[40],"class_list":["post-7647","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-content","tag-css"],"acf":[],"featured_image_src":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-after.jpg","featured_image_src_square":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/background-blend-mode-after.jpg","author_info":{"display_name":"Sridhar Katakam","author_link":"https:\/\/wpdevdesign.com\/author\/srikat\/"},"_links":{"self":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/7647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/comments?post=7647"}],"version-history":[{"count":0,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/7647\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media\/7649"}],"wp:attachment":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media?parent=7647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/categories?post=7647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/tags?post=7647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}