Title: background image
Last modified: November 10, 2017

---

# background image

 *  [madvic](https://wordpress.org/support/users/madvic/)
 * (@madvic)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/)
 * Hi, Thanks a lot for this beautiful theme.
    It is possible to improve performance
   by adding conditions (css media queries) on the background-image (in sidebar).
   For not loading the original size ? Thanks

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Theme Author [Shaped Pixels](https://wordpress.org/support/users/shaped-pixels/)
 * (@shaped-pixels)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/#post-9676459)
 * Hello madvic,
 * It’d be easier if you elaborated the issue along with ample screenshots.
    Also
   provide your site url so we can track it quickly.
 * Best Regards,
    Bidur
 *  Thread Starter [madvic](https://wordpress.org/support/users/madvic/)
 * (@madvic)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/#post-9676697)
 * Hi,
    The website is not yet inline.
 * But you can see here :
    [https://snag.gy/GjXP0W.jpg](https://snag.gy/GjXP0W.jpg)
 * In mobile (360 width) the background image in the full size. You not use query
   string for use other size and limited the page weight.
    Thanks
 *  Theme Author [Shaped Pixels](https://wordpress.org/support/users/shaped-pixels/)
 * (@shaped-pixels)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/#post-9680057)
 * Hello madvic,
 * Well we don ‘t have separate background option for mobile devices.However the
   sidebar background image is responsive and you can change the size inside customize
   >>Sidebar Background Image>>Background size.
    Do you want to change anything 
   else?
 * Best Regards,
    Bidur
 *  Thread Starter [madvic](https://wordpress.org/support/users/madvic/)
 * (@madvic)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/#post-9680255)
 * Hi, thanks.
    You can’t adapt your code ? O.o For exemple twenteyseventten, add
   srcset to the `<img>`.
 *  Thread Starter [madvic](https://wordpress.org/support/users/madvic/)
 * (@madvic)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/#post-9680265)
 * Have you a githup repository ?
 *  Theme Author [Shaped Pixels](https://wordpress.org/support/users/shaped-pixels/)
 * (@shaped-pixels)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/#post-9684268)
 * Have you tried what we’ve mentioned above?
 * Sorry we don’t use any repositories for theme support. We perform all the support
   related tasks from the forum here direclty.
 * Best Regards,
    Bidur
 *  Thread Starter [madvic](https://wordpress.org/support/users/madvic/)
 * (@madvic)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/#post-9684332)
 * No, I have not tried because it does not meet my needs. My need is to have a 
   full size image for a desktop, average for a tablet and small for a mobile
 * I’ll keep you informed
 *  Thread Starter [madvic](https://wordpress.org/support/users/madvic/)
 * (@madvic)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/#post-9685919)
 * Here we go :
 * code of `custom-backgrounds.php` :
 *     ```
       <?php
   
       /**
        * Retrieves the id of the background image
        *
        * @return int post_id
        */
       function seasonal_get_background_image_id() {
   
           $bg_id = get_theme_mod('background_image_id', null );
   
           if( ! $bg_id ) {
   
             if ( ! $bg_img = get_background_image() )
                 return FALSE;
   
             $query = array(
                 'post_type'  => 'attachment',
                 'fields'     => 'ids',
                 'meta_query' => array (
                     array (
                         'key' => '_wp_attachment_is_custom_background',
                         'value'   => get_option( 'stylesheet' ),
                         'compare' => '==',
                     ),
                     array (
                         'key' => '_wp_attachment_metadata',
                         'value'   => basename( $bg_img ),
                         'compare' => 'LIKE',
                     )
                 )
             );
   
             if ( array () === $bg_post = get_posts( $query ) )
                 return FALSE;
   
             $bg_id = $bg_post[0];
   
             set_theme_mod('background_image_id', $bg_id );
           }
           return $bg_id;
       }
   
       /**
        * Default custom background callback.
        *
        * @since WordPress 3.0.0
        */
        function seasonal_custom_background() {
           // $background is the saved custom image, or the default image.
           $background = set_url_scheme( get_background_image() );
           $background_large = $background_mediumlarge = $background;
   
           $custom_post_background = false;
   
           if( is_singular() ) {
             global $post;
             $background_image_id = get_post_meta( $post->ID, 'sidebar_background_image_id', true );
           }
   
           if( !is_int($background_image_id) ){
             $background_image_id = get_background_image_id();
           }
   
           if( is_int($background_image_id) ){
   
             $post_background_image = wp_get_attachment_image_src( $background_image_id, 'full' );
             $post_background_image_large = wp_get_attachment_image_src( $background_image_id, 'large' );
             $post_background_image_mediumlarge = wp_get_attachment_image_src( $background_image_id, 'medium_large' );
   
             if( $post_background_image ) {
               $custom_post_background = true;
               $background = esc_url( $post_background_image[0] );
               $background_large = esc_url( $post_background_image_large[0] );
               $background_mediumlarge = esc_url( $post_background_image_mediumlarge[0] );
             }
           }
           // $color is the saved custom color.
           // A default has to be specified in style.css. It will not be printed here.
           $color = get_background_color();
   
           if ( $color === get_theme_support( 'custom-background', 'default-color' ) ) {
             $color = false;
           }
   
           if ( ! $background && ! $color )
             return;
   
           $style = $color ? "background-color: $color;" : '';
           $mediaq = $sidebar_before_opacity = '';
   
           if ( $background ) {
             $image = " background-image: url('".$background."');";
             $image_large = " background-image: url('".$background_large."');";
             $image_mediumlarge = " background-image: url('".$background_mediumlarge."');";
           }
   
           if ( $background ) {
             $image = " background-image: url('$background');";
   
             $repeat = esc_html(get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) );
             if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
               $repeat = 'repeat';
             $repeat = " background-repeat: $repeat;";
   
             $position = esc_html(get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) );
             if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
               $position = 'left';
             $position = " background-position: top $position;";
   
             $attachment = esc_html(get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) );
             if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
               $attachment = 'scroll';
             $attachment = " background-attachment: $attachment;";
   
             $size = esc_html(get_theme_mod( 'background_image_size', 'cover' ) );
             if ( ! in_array( $size, array( 'auto', 'cover', 'contain' ) ) || $custom_post_background )
               $size = 'cover';
             $size = " background-size: $size;";
   
             $opacity = esc_attr(get_theme_mod( 'background_overlay_opacity', 0.5 ) );
             if( $opacity && is_numeric( $opacity ) && $opacity >= 0 && $opacity <= 1 )
               $sidebar_before_opacity = " opacity: $opacity;";      
   
           $style .= $image . $repeat . $position . $attachment . $size; 
   
           // Media Queries
           if($image_mediumlarge)
             $mediaq .= PHP_EOL."@media (min-width: 1px){.sidebar { " . $image_mediumlarge . "}}";
           if($image_large)
             $mediaq .= PHP_EOL."@media (min-width: 769px){.sidebar { " . $image_large . "}}"; // image is at 33% but not the height.
           if($image)
             $mediaq .= PHP_EOL."@media (min-width: 1025px){.sidebar { " . $image . "}}";
       	}
   
       ?>
       <style type="text/css" id="custom-background-css">
       .sidebar { <?php echo trim( $style ); ?> }
       <?php echo $mediaq; ?>
       .sidebar:before {<?php echo trim( $sidebar_before_opacity ); ?>}
       </style>
       <?php
       }
       ```
   
 *  Theme Author [Shaped Pixels](https://wordpress.org/support/users/shaped-pixels/)
 * (@shaped-pixels)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/#post-9688535)
 * It’s great if you can customize the template file.
    Is it working?
 *  Thread Starter [madvic](https://wordpress.org/support/users/madvic/)
 * (@madvic)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/#post-9689232)
 * It is not a template file, it’s a modification (pull request) of your file `custom-
   backgrounds.php`.
    Yes it’s work.
 * In the codex [https://codex.wordpress.org/Custom_Backgrounds](https://codex.wordpress.org/Custom_Backgrounds),
   WordPress not store the attachment ID, I resolved it for make responsive the 
   background.

Viewing 10 replies - 1 through 10 (of 10 total)

 The topic ‘background image’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/seasonal/1.2.0/screenshot.png)
 * Seasonal
 * [Support Threads](https://wordpress.org/support/theme/seasonal/)
 * [Active Topics](https://wordpress.org/support/theme/seasonal/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/seasonal/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/seasonal/reviews/)

 * 10 replies
 * 2 participants
 * Last reply from: [madvic](https://wordpress.org/support/users/madvic/)
 * Last activity: [8 years, 10 months ago](https://wordpress.org/support/topic/background-image-152/#post-9689232)
 * Status: not resolved