How can I set different banner images using background cover at different breakpoints?

Question

I use the following code to see if a featured image exists and set my banner image like so:

<?php if ( has_post_thumbnail() ) : 
        $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'hero', '' );
    ?>
    <div class="banner" style="background: url(<?php echo $src[0]; ?>) no-repeat center center; 
                      -webkit-background-size: cover;
                      -moz-background-size: cover;
                      -o-background-size: cover;
                      background-size: cover;">

I would like to alter this and display different images at different breakpoints using:

<?php if ( has_post_thumbnail() ) : 
    $hero = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'hero', '' );
    $tablet = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'tablet', '' );
    $phablet = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'phablet', '' );
    $phone = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'phone', '' );
?>

I’m not sure how to specify the media queries in the
I’ve used something similar with the tag, but I would rather have the image as a background cover.

Any suggestions?

0
crondeau 5 years 0 Answers 82 views 0

Leave an answer