Responsive background images added inline

by

I am setting the featured image as a background for the top part of the page. The images are quite large and I’d like to be able to set smaller image sizes for smaller screen sizes. Since the images are added inline, I don’t think I can use the external styles.css file to set different images.

Here’s an example of what I have:

<?php 
$bannerImg = '';
if(has_post_thumbnail()) {
    $bannerImg = get_the_post_thumbnail_url();
}
?>

<section class="page-banner" style="background-image: url(<?php echo $bannerImg; ?>);">
    <h1 class="banner-title"><?php the_title(); ?></h1>
</section>

I’d like to do something like srcset but I couldn’t find an equivalent for background images.

2 Answers
2

If you use Adaptive Images plugin for WordPress, you would just make one inline css for all viewport widths using the biggest image and then it does all the work on the server. You do nothing to your markup but in the Adaptive Images plugin settings you enter your breakpoints, so it will serve small images to small devices and so forth.

If you use Adaptive Images it would be:

/**  
 *
 * Background Image from Post Image using Adaptive Images Plugin for WordPress
 * @since  1.0.0
 * Credits: TwentyFifteen WordPress theme adjacent pagination
 *
 */
function the_other_idea_good_heavens_change_this_function_name() {

    global $post;

    if ( ! has_post_thumbnail( $post->ID ) ) return; //exit if there is no featured image

    $theme_handle="visionary"; //the theme handle used for the main style.css file

    //image
    $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'super-huge-image' );

    //css
    $css=".banner-image { background-image: url(" . esc_url( $image[0] ) . '); } ';

    //minify            
    $css = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css );

    //add it
    wp_add_inline_style( $theme_handle, $css );

}
add_action( 'wp_enqueue_scripts', 'the_other_idea_good_heavens_change_this_function_name', 99 );

This is what I do (before I started using Adapative Images ).

add_image_size();

I use three sizes small, medium, large in this example and then I regenerate my thumbnails.

/**  
 *
 * Background Image from Post Image
 * @since  1.0.0
 * Credits: TwentyFifteen WordPress theme adjacent pagination
 *
 */
function yourprefix_responsive_mobile_first_background_images() {

    global $post;

    if ( ! has_post_thumbnail( $post->ID ) ) return; //exit if there is no featured image


    $theme_handle="visionary";     //the theme handle used for the main style.css file
    $property     = '.banner-image'; //the property
    $css="";

    //small image
    $small_img   = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'my-small-image-size' );
    $small_style="
            " . $property . ' { background-image: url(' . esc_url( $small_img[0] ) . '); }
            ';
    $css .= $small_style;


    //medium image
    $medium_img   = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'my-medium-image-size' );
    $medium_style="
            " . $property . ' {  background-image: url(' . esc_url( $medium_img[0] ) . '); }
            ';
    $css .= '@media (min-width: 1000px) { '. $medium_style . ' }';


    //large image
    $large_img   = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'my-large-image-size' );
    $large_style="
            " . $property . ' {  background-image: url(' . esc_url( $large_img[0] ) . '); }
            ';
    $css .= '@media (min-width: 1700px) { '. $large_style . ' }';

    //minify            
    $css = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css );

    //add it
    wp_add_inline_style( $theme_handle, $css );

}
add_action( 'wp_enqueue_scripts', 'yourprefix_responsive_mobile_first_background_images', 99 );

Leave a Comment