In Oxygen, you can apply a background image as well as an image overlay within the options. However, these settings can not be changed per break point. Why would you want it to change based on break point? If the foreground text is hard to read due to not enough contrast when in the mobile view(or any really) then you would want to increase the rgba transparency value. Here is what I do in oxygen to do this since the overlay can’t be changed per breakpoint.<\/p>\n
First, I give the hero section a base class of .hero , in that class I only specify settings that will apply to all other hero sections layouts that are the same minus the variable background image be used. Then, I add an additional class that is only used and is specific to that page to dictate the background image and to handle the image overlay in\u00a0 media queries in css.<\/p>\n
i.e.<\/p>\n
\/* overlay for everypage. hero is homepage with it's unique layout settings, hero2 is sub pages that share the same hero layout . \r\n\r\nThe class for the page specifies the background image and handles overlay on mobile\r\n *\/\r\n\r\n@media(max-width:991px){\r\n #hero{\r\n background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https:\/\/idealwebdesign.net\/sites\/vanilla\/wp-content\/uploads\/2020\/07\/background.jpg);\r\n }\r\n #hero2.v1-page{\r\n background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https:\/\/idealwebdesign.net\/sites\/vanilla\/wp-content\/uploads\/2020\/07\/v1.jpg);\r\n }\r\n #hero2.v6-page{\r\n background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https:\/\/idealwebdesign.net\/sites\/vanilla\/wp-content\/uploads\/2020\/07\/V6-DBL.jpg);\r\n }\r\n #hero2.v5-page{\r\n background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https:\/\/idealwebdesign.net\/sites\/vanilla\/wp-content\/uploads\/2020\/07\/V5-DBL.jpg);\r\n }\r\n #hero2.v4-page{\r\n background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https:\/\/idealwebdesign.net\/sites\/vanilla\/wp-content\/uploads\/2020\/07\/V4-DBL.jpg);\r\n }\r\n #hero2.v3-page{\r\n background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https:\/\/idealwebdesign.net\/sites\/vanilla\/wp-content\/uploads\/2020\/07\/V3-DBL.jpg);\r\n }\r\n #hero2.v2-page{\r\n background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https:\/\/idealwebdesign.net\/sites\/vanilla\/wp-content\/uploads\/2020\/07\/V2-DBL.jpg);\r\n }\r\n\r\n}<\/pre>\nSo here we have 2 different types of hero layouts. #hero and #hero2 – neither of these contain the background or overlay settings. The classes like .v2-page is only used for that page and contains the background image specific for that page. The overlay for mobile is also handled.<\/p>\n","protected":false},"excerpt":{"rendered":"
In Oxygen, you can apply a background image as well as an image overlay within the options. However, these settings can not be changed per break point. Why would you want it to change based on break point? If the foreground text is hard to read due to not enough contrast when in the mobile […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,2,5,16,6,11],"tags":[],"class_list":["post-548","post","type-post","status-publish","format-standard","hentry","category-css","category-design","category-development","category-oxygen","category-php","category-wordpress"],"_links":{"self":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/comments?post=548"}],"version-history":[{"count":1,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/548\/revisions"}],"predecessor-version":[{"id":549,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/548\/revisions\/549"}],"wp:attachment":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/media?parent=548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/categories?post=548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/tags?post=548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}