Simple BG image block group

For a recent project, I wanted a really simple way to throw some content into the WP Block Editor (Gutenberg) together with an image, and set the image as a background image.

Here are the steps to create the group:

1. add an image that will serve as the background image
2. add some text
3. select the image and all the text blocks together
4. convert the selected blocks to a group
5. in the “advanced” settings the group block, add the class ‘bg-img’ or ‘bg-image’

If you add the ‘overlay’ class, together with ‘white’ or ‘black’ (more, of course, if you add the class settings), you can add a cool little transparent overlay.

Here is the SASS:

// BG IMG
// -- group w/ text & an img
// takes the image and pastes it as the BG IMG
.bg-img, .bg-image {
	padding: 80px 0;
	position: relative;
	overflow: hidden;
	
	&.vw5 { padding: 5vw 0; } &.vw10 { padding: 10vw 0; } &.vw15 { padding: 15vw 0; } &.vw20 { padding: 20vw 0; } &.vw25 { padding: 25vw 0; } &.vw30 { padding: 30vw 0; }
	
	&.overlay.black {
		background-color: rgba(black,0.4);
	}
	&.overlay.white {
		background-color: rgba(white,0.4);
	}
	
	.wp-block-group__inner-container {
		max-width: 1200px;
		padding: 0 5%;
		margin: 0 auto;
		
		> *:last-child {
			margin-bottom: 0;
		}
		
		:where(p, h2, h3, h4, h5, h6, li) {
			color: white;
		}
	}
	
	h3 {
		font-size: 20px;
	}
	
	img {
		position: absolute;
		max-width: none;
		max-height: none;
		min-width: 100%;
		min-height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		object-fit: cover;
		object-position: center center;
	}
}