Add image-background-layer to image helper classes

digitoimistodude · Sep 1, 2022 · 8641425 · 8641425
1 parent 8e58ca5
commit 8641425
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 * Improve post title color and size accessibility in Gutenberg editor
 * Remove unnecessary float reset from nav item
+* Add image-background-layer to image helper classes
 
 ### 9.0.9: 2022-08-25
 

diff --git a/css/dev/global.css b/css/dev/global.css
diff --git a/css/dev/gutenberg-editor-styles.css b/css/dev/gutenberg-editor-styles.css
diff --git a/css/prod/global.css b/css/prod/global.css
diff --git a/css/prod/gutenberg-editor-styles.css b/css/prod/gutenberg-editor-styles.css
diff --git a/sass/helpers/_images.scss b/sass/helpers/_images.scss
@@ -1,15 +1,21 @@
 // Styling background-images
+// For custom sized image background, use: class="image image-background"
+// For bg as layer, use: class="image image-background image-background-layer"
 .image-background > img {
-  height: 100%;
-  left: 0;
   object-fit: cover;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 0;
 }
 
 .image-background {
   overflow: hidden;
   position: relative;
 }
+
+.image-background > img,
+.image-background-layer {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}