Stretch an Image to the Edge of the Page in WordPress

A common layout puts text in one column and an image in the other, with the image running past the content container all the way to the edge of the browser window. With CSS alone you can only do that when you know the exact container width and column position. This snippet resizes the image from inside its container to the left or right edge of the WordPress page, whatever the container width.

The snippet

Two parts: CSS for the head and a small script for the footer.

/* Image that bleeds from its column to the left or right edge of the page. */
.dpc-bleed-left,
.dpc-bleed-right {
	position: relative;
	max-width: none !important;
}

.dpc-bleed-left img,
.dpc-bleed-right img,
img.dpc-bleed-left,
img.dpc-bleed-right {
	display: block;
	max-width: none !important;
	height: auto;
}

.dpc-bleed-left img,
.dpc-bleed-right img {
	width: 100%;
}

/* Stretch .dpc-bleed-left / .dpc-bleed-right from their column to the page edge. */
(function () {
	var minWidth = 992; // Below this screen width the image stays inside its column.

	function update() {
		var items = document.querySelectorAll('.dpc-bleed-left, .dpc-bleed-right');
		var wide = window.matchMedia('(min-width: ' + minWidth + 'px)').matches;
		var page = document.documentElement.clientWidth; // Page width without the scrollbar.

		items.forEach(function (el) {
			el.style.marginLeft = '';
			el.style.marginRight = '';
			el.style.width = '';

			if (!wide || !el.parentElement) {
				return;
			}

			// The column's content box: its border box minus its padding.
			var box = el.parentElement.getBoundingClientRect();
			var css = window.getComputedStyle(el.parentElement);
			var left = box.left + parseFloat(css.paddingLeft);
			var right = box.right - parseFloat(css.paddingRight);

			if (el.classList.contains('dpc-bleed-left')) {
				el.style.marginLeft = -left + 'px';
				el.style.width = right + 'px';
			} else {
				el.style.width = page - left + 'px';
			}
		});
	}

	var frame = 0;
	function schedule() {
		window.cancelAnimationFrame(frame);
		frame = window.requestAnimationFrame(update);
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', update);
	} else {
		update();
	}
	window.addEventListener('load', update);
	window.addEventListener('resize', schedule);
})();

Use it

Add the class dpc-bleed-left or dpc-bleed-right to the image, or to the block that holds it. In the block editor, select the Image block inside a Columns block and enter the class under Advanced → Additional CSS class(es). In a theme or page builder, put it on the image element:

<div class="container">
	<div class="column">
		<img class="dpc-bleed-left" src="hero.jpg" alt="">
	</div>
	<div class="column">Text</div>
</div>

How it works

The script measures the column the image sits in (its parent) with getBoundingClientRect() and subtracts the column’s padding. That replaces the hard-coded + 40 for column padding in the old version.
dpc-bleed-left gets a negative left margin as large as the gap between the column and the page edge, and a width up to the column’s right edge. dpc-bleed-right keeps its left edge and grows to the right edge of the page.
The page width comes from document.documentElement.clientWidth, which leaves out the scrollbar, so there is no horizontal scrollbar.
Below 992 px nothing happens and the image stays in its column, which is usually stacked by then. On resize the script runs again, at most once per frame.
The CSS removes the theme’s max-width: 100% from these images only, which the old post asked you to do by hand.
The old version needed jQuery, which block themes do not load, and its small-screen branch reset .var instead of the image. This one is plain JavaScript.

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Conditions and add the condition Page/Post: All, or only the pages that use the layout. Under Script location tick Header and Footer. Paste the CSS into the Header editor with the mode set to CSS, and the JavaScript into the Footer editor with the mode set to JavaScript, then publish.

Scripts Organizer prints Header and Footer code only with the Conditions trigger on the front end, not with Everywhere. The footer is the right place for the script: the images it measures are already on the page.

Customise it

Other breakpoint: change minWidth in the script to match where your columns stack.
Crop the image to a fixed height instead of scaling it: add height: 520px; object-fit: cover; to img.dpc-bleed-left, img.dpc-bleed-right.
A full-width section in the block editor does not need this: use the Full width alignment of the block.

Gotchas

Put the class on the image or its direct wrapper. The script measures the parent element, so an extra wrapper with its own width changes the result.
If a parent has overflow: hidden, the part outside it is cut off. Remove the overflow on the column or its row.
Until the script runs, the image shows inside its column for a moment. Keep the code in the footer so the run happens right after the content loads.

In the Scripts Organizer library Import it with one click from Scripts Organizer.