Background css

header-bg-css.php

 
// header image css
 function kdw_header_image_css(){
     
    global $post;
    $bg_imgID = false;
    $sizeM = 'medium';
    $sizeL = 'large';
    $sizeXL = 'xl';
     
    if ( is_singular('page') ){
        
        if ( has_post_thumbnail() ){ 
            $bg_imgID = get_post_thumbnail_id();
        }
        
    } else if ( is_home() ){
        
        $bg_imgID = esc_attr( get_field('kdw_options_homepage_image','options') );
       
    } else if ( is_category() ){
        
        $queried_object = get_queried_object();
        $catTerm = $queried_object->term_id;
        
        $bg_imgID = esc_attr( get_field('kdw_cat_image', 'term_'.$catTerm ) );

    } 
     

    // generate css
    
    if ( $bg_imgID ){
        
        
        echo '<style>';

            // size M  
            $bg_medium = wp_get_attachment_image_src( $bg_imgID, $sizeM );
            $bg_url_medium = $bg_medium[0];
            echo '.header-image{ background-image: url('.$bg_url_medium.'); }';
        
            // size L
            echo '@media screen and (min-width: 540px) {';     
                $bg_large = wp_get_attachment_image_src( $bg_imgID, $sizeL );
                $bg_url_large = $bg_large[0];
                echo '.header-image{ background-image: url('.$bg_url_large.');}';
            echo '}';
        
            // size XL
            echo '@media screen and (min-width: 1280px) {';    
                $bg_xl = wp_get_attachment_image_src( $bg_imgID, $sizeXL );
                $bg_url_xl = $bg_xl[0];
                echo '.header-image{ background-image: url('.$bg_url_xl.');}';
            echo '}';
        
         echo '</style>';
    }  
   
}