cliveportman/code

Handling retina or hi-res images as background images using Craft CMS

This sample uses a Craft CMS assets field, called homeImages, choosing one asset at random, but would work with any CMS provided it supports image transforms. I call this the non-art-direction method as the same asset is used each time.

<style>
{% if entry.homeImages | length %}
{% set image = entry.homeImages.order('RAND()').first() %}
{% set lowResMobile = { mode: 'fit', width: 414 } %}
{% set hiResMobile = { mode: 'fit', width: 828 } %}
{% set lowResTabletPortrait = { mode: 'fit', width: 768 } %}
{% set hiResTabletPortrait = { mode: 'fit', width: 1536 } %}
{% set lowResTabletLandscape = { mode: 'fit', width: 1024 } %}
{% set hiResTabletLandscape = { mode: 'fit', width: 2048 } %}
{% set lowResLaptop = { mode: 'fit', width: 1366 } %}
{% set hiResLaptop = { mode: 'fit', width: 2732 } %}
{% set lowResDesktop = { mode: 'fit', width: 1920 } %}
{% set hiResDesktop = { mode: 'fit', width: 3840 } %}
{% set lowResLargeDesktop = { mode: 'fit', width: 2560 } %}
{% set hiResLargeDesktop = { mode: 'fit', width: 5120 } %}
{# MOBILES <= 414px #}
body {
    background: url({{ image.getUrl(lowResMobile) }}) top no-repeat;
    background-size: {{ image.getWidth(lowResMobile) }}px, {{ image.getHeight(lowResMobile) }}px;}
}
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 414px), (min-resolution: 192dppx) and (max-width: 414px) {
body {
    height: {{ image.getHeight(lowResMobile) }}px;
    background: url({{ image.getUrl(hiResMobile) }}) top no-repeat;
}
}
{# PORTRAIT TABLETS > 415px #}
@media (min-width: 415px) {
body {
    background: url({{ image.getUrl(lowResTabletPortrait) }}) top no-repeat;
    background-size: {{ image.getWidth(lowResTabletPortrait) }}px, {{ image.getHeight(lowResTabletPortrait) }}px;}
}
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px), (min-resolution: 192dppx) and (min-width: 768px) {
body {
    height: {{ image.getHeight(lowResTabletPortrait) }}px;
    background: url({{ image.getUrl(hiResTabletPortrait) }}) top no-repeat;
}
}    
{# LANDSCAPE TABLETS > 769px #}
@media (min-width: 769px) {
body {
    background: url({{ image.getUrl(lowResTabletLandscape) }}) top no-repeat;
    background-size: {{ image.getWidth(lowResTabletLandscape) }}px, {{ image.getHeight(lowResTabletLandscape) }}px;}
}
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 769px), (min-resolution: 192dppx) and (min-width: 769px) {
body {
    height: {{ image.getHeight(lowResTabletLandscape) }}px;
    background: url({{ image.getUrl(hiResTabletLandscape) }}) top no-repeat;
}
}
{# LAPTOPS > 1025px #}
@media (min-width: 1025px) {
body {
    background: url({{ image.getUrl(lowResLaptop) }}) top no-repeat;
    background-size: {{ image.getWidth(lowResLaptop) }}px, {{ image.getHeight(lowResLaptop) }}px;}
}
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1025px), (min-resolution: 192dppx) and (min-width: 1025px) {
body {
    height: {{ image.getHeight(lowResLaptop) }}px;
    background: url({{ image.getUrl(hiResLaptop) }}) top no-repeat;
}
}    
{# DESKTOPS > 1367px #}
@media (min-width: 1367px) {
body {
    background: url({{ image.getUrl(lowResDesktop) }}) top no-repeat;
    background-size: {{ image.getWidth(lowResDesktop) }}px, {{ image.getHeight(lowResDesktop) }}px;}
}
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1367px), (min-resolution: 192dppx) and (min-width: 1367px) {
body {
    height: {{ image.getHeight(lowResDesktop) }}px;
    background: url({{ image.getUrl(hiResDesktop) }}) top no-repeat;
}
}
{# LARGE DESKTOPS > 1921px #}
@media (min-width: 1921px) {
body {
    background: url({{ image.getUrl(lowResLargeDesktop) }}) top no-repeat;
    background-size: {{ image.getWidth(lowResLargeDesktop) }}px, {{ image.getHeight(lowResLargeDesktop) }}px;}
}
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1921px), (min-resolution: 192dppx) and (min-width: 1921px) {
body {
    height: {{ image.getHeight(lowResLargeDesktop) }}px;
    background: url({{ image.getUrl(hiResLargeDesktop) }}) top no-repeat;
}
}    
{% endif %}
</style>