I’m creating a mobile-first website that makes use of full-width background images which are uploaded to the page as featured images.
The problem I’m having is that the background images are styled inline because PHP is needed to get the actual background image. Now because they’re being fetched inline, the images are going to be downloaded no matter what platform you’re on. I only want the images to be available/downloaded if you’re on a desktop/tablet device. NEVER on a mobile device. So I need a way that will stop the images from being downloaded if you’re on a mobile device – has anyone any experience of achieving this before?
The code I currently have:
<?php $background_image = wp_get_attachment_image_src(get_post_thumbnail_id($page -> ID), 'full'); ?>
<div class="page-background-image" style="background-image: url(background_image);"></div>
You can use a library such as Mobile-Detect, which has WordPress support. Or you can use media queries in CSS: