By continuing your visit to this site, you accept the use of cookies. Read more

Scout APM helps PHP developers pinpoint N+1 queries, memory leaks & more so you can troubleshoot fast & get back to coding faster. Start your free 14-day trial today .

« back — written by Brent on June 24, 2017

Responsive images as CSS background

Integrating the Responsive Images spec together with CSS backgrounds, allowing for more flexibility for eg. hero images because you can use background-size: cover; etc., and still have the full benefits of responsive image loading.

< html> < head> < style> img { width : 100% ; } img .loaded { display : none; } .responsive-image { width : 100% ; height : 500px ; background-size : cover; background-position : center; } </ style> </ head> < body> < div class= "responsive-image"> < img src= "./small.jpg" srcset = "./large.png 3000w, ./medium.jpg 1920w, ./small.jpg 425w" > </ div> < script> document .addEventListener( 'DOMContentLoaded' , function ( ) { const images = document .querySelectorAll( '.responsive-image' ); [].forEach.call(images, function ( imageContainer ) { const image = imageContainer.querySelector( 'img' ); image.addEventListener( 'load' , function ( ) { if (!image.currentSrc) { return ; } imageContainer.style[ 'background-image' ] = "url('" + image.currentSrc + "')" ; image.classList.add( 'loaded' ); }); }) }); </ script> </ body> </ html>