Optimising Background Images - Guide
TLDR Summary
Thumbnail and Medium-Sized Background Images
Note the width here is the size of the image that will be requested for 1dppx screens.
{% include 'img', width: 1000, path: 'images/high-quality-image.jpg', layout: 'default/sm_bg' %}
Full-width Background images
CSS image-set
does not currently support responsive images by screen width, so we don't currently have a layout for this scenario. It is probably easier to link to a single Cloudflare version of the image source, with automatic optimisation. You can then add any HTML you want:
<div style="background-image: url('{% include 'img_url', path: 'images/high-quality-image.jpg', options: 'fit=cover,width=auto' %}')
background-repeat: no-repeat; background-size: cover; background-position: center center;">
</div>
See the reference for more information about including links to versions of the image directly:
Image Transformations ReferenceLast updated
Was this helpful?