Title: responsive background images for sections?
Last modified: August 31, 2016

---

# responsive background images for sections?

 *  [the.mnbvcx](https://wordpress.org/support/users/themnbvcx-1/)
 * (@themnbvcx-1)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-background-images-for-sections/)
 * the inline css for section background images is built in _inc/accesspress-functions.
   php_ by _function accesspress\_header\_styles\_scripts()_.
 * Would it be possible to make these images responsive somehow?
    It seems WP 4.4
   doesn’t recognize them for automatic responsiveness, so every mobile user gets
   the full size images….
 * (I already tried, but I failed on overwriting the original function – somehow
   I got lost in between all the add_action and remove_action and the various hooks)

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

 *  [mikorka](https://wordpress.org/support/users/mikorka/)
 * (@mikorka)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-background-images-for-sections/#post-6920009)
 * Same issue here. I’m using the suggested background image size (1900*800px) with
   options “no repeat”, “middle center”, “fixed in place” and “auto”. It looks OK
   on laptop, but background gets duplicated on mobile view.
 * I double-checked the theme’s demo site on my smartphone, it has the same bug 
   if you look at the portfolio section!
 *  [mikorka](https://wordpress.org/support/users/mikorka/)
 * (@mikorka)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-background-images-for-sections/#post-6920015)
 * Okay, so here is what I found in other discussions so far. iOS devices have a
   special layout which is the reason for duplicated backgrounds. The following 
   setting resolved this part: no repeat, top center, fixed in place, cover.
 * HOWEVER!
 * The background image is still not responsive and gets cut on any mobile or tablet
   view. What we mean under “responsive” is to have the image automatically resized
   so that it fits to the actual resolution and users can get the same view on their
   mobile devices.
 * Is this possible to fix by adding some specific css lines?
 *  Thread Starter [the.mnbvcx](https://wordpress.org/support/users/themnbvcx-1/)
 * (@themnbvcx-1)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-background-images-for-sections/#post-6920042)
 * > What we mean under “responsive” is to have the image automatically resized 
   > so that it fits to the actual resolution and users can get the same view on
   > their mobile devices.
 * Not exactly, at least that is not my point.
    A responsive page does not send 
   the full 1900*800 pic every time and lets the browser scale it down, but sends
   a fitting (smaller) image instead thus saving load time and bandwidth. WP does
   this since 4.4 for images inside posts, but not for css backgrounds.
 *  [mikorka](https://wordpress.org/support/users/mikorka/)
 * (@mikorka)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-background-images-for-sections/#post-6920043)
 * Yep, that’s what I meant. Looking at the uploaded image files it seems the theme
   does part of the job, but the [@media](https://wordpress.org/support/users/media/)
   rules as described in [this article](https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/)
   are missing.
 * I tested the theme’s demo site on [http://quirktools.com/screenfly/](http://quirktools.com/screenfly/)
   and verified with Firebug, it indeed loads the full size background image even
   for mobiles.
 * The “enable responsive” option is checked in theme options, just before somebody
   asks.
 *  Thread Starter [the.mnbvcx](https://wordpress.org/support/users/themnbvcx-1/)
 * (@themnbvcx-1)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-background-images-for-sections/#post-6920047)
 * w/o having checked it in detail I would assume that checkbox only triggers responsive
   layout (i.e. rearranging all visible elements to fit the screen size), but not
   responsive images.
 * First step towards a workaround or solution would be to wrap the original function
   in
 *     ```
       if ( ! function_exists( 'accesspress_header_styles_scripts' ) ) :
       function accesspress_header_styles_scripts() {
       [...]
       }
       endif;
       ```
   
 * Thus it can be overwritten in a child theme.
 *  Thread Starter [the.mnbvcx](https://wordpress.org/support/users/themnbvcx-1/)
 * (@themnbvcx-1)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-background-images-for-sections/#post-6920048)
 * Here’s my workaround part 2:
    (1) Install and activate the plugin Responsify 
   WP (2) copy the full function from inc/accesspress-functions.php into your child
   theme’s function.php and insert
 *     ```
       if(!empty($sections)){
       	foreach ($sections as $section) {
       		$responsive_image_id = get_attachment_id_from_src( $section['image'] );
       		if ( $responsive_image_id > 0 ) {
       		echo rwp_style($responsive_image_id, array(
       			'selector' => '#section-'.$section['page']
       			) );
       		echo "\n";
       		}
       	}
       	}
       	echo "<style type='text/css' media='all'>\n";
       ```
   
 * before
 *     ```
       if(!empty($sections)){
       	foreach ($sections as $section) {
       		echo "#section-".$section['page']."{ background:url(".$section['image'].") ".$section['repeat']." ".$section['attachment']." ".$section['position']." ".$section['color']."; background-size:".$section['size']."; color:".$section['font_color']."}\n";
       		echo "#section-".$section['page']." .overlay { background:url(".$image_url.$section['overlay'].".png);}\n";
       	}
       	}
       ```
   
 *  [mikorka](https://wordpress.org/support/users/mikorka/)
 * (@mikorka)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-background-images-for-sections/#post-6920074)
 * Did not manage to try your work-around, but another interesting thing to point
   out: even the demo site of this template failed to pass Google speed test. It
   refers to images and wrong compression both on mobile and desktop.
 * [https://developers.google.com/speed/pagespeed](https://developers.google.com/speed/pagespeed)
 *  Thread Starter [the.mnbvcx](https://wordpress.org/support/users/themnbvcx-1/)
 * (@themnbvcx-1)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-background-images-for-sections/#post-6920115)
 * Some more finetuning:
    (1) add some custom background sizes in your (child) theme’s
   _function.php_ for various screen widths; actually these sizes are independent
   from the breakpoints of your responsive theme:
 *     ```
       // background sizes
       add_image_size('bg400', 400, 9999);
       add_image_size('bg720', 720, 9999);
       add_image_size('bg1024', 1024, 9999);
       add_image_size('bg1280', 1280, 9999);
       add_image_size('bg1440', 1440, 9999);
       add_image_size('bg1680', 1680, 9999);
       ```
   
 * (2) modify the inserted code: add the sizes to be taken into consideration
 *     ```
       if(!empty($sections)){
       foreach ($sections as $section) {
       	$responsive_image_id = get_attachment_id_from_src( $section['image'] );
       	if ( $responsive_image_id > 0 ) {
       	echo rwp_style($responsive_image_id, array(
       		'selector' => '#section-'.$section['page'],
       		'sizes' => array('bg400', 'bg720', 'bg1024', 'bg1280', 'bg1440', 'bg1680', 'full'),
       		'media_queries' => array(
       			'bg720'  => 'min-width:  720px',
       			'bg1024' => 'min-width: 1024px',
       			'bg1280' => 'min-width: 1280px',
       			'bg1440' => 'min-width: 1440px',
       			'bg1680' => 'min-width: 1680px',
       			'full'   => 'min-width: 1920px',
       		)
       		) );
       	echo "\n";
       	}
       }
       }
       echo "<style type='text/css' media='all'>\n";
       ```
   

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

The topic ‘responsive background images for sections?’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/accesspress-parallax/4.6/screenshot.
   png)
 * AccessPress Parallax
 * [Support Threads](https://wordpress.org/support/theme/accesspress-parallax/)
 * [Active Topics](https://wordpress.org/support/theme/accesspress-parallax/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/accesspress-parallax/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/accesspress-parallax/reviews/)

## Tags

 * [background](https://wordpress.org/support/topic-tag/background/)
 * [section](https://wordpress.org/support/topic-tag/section/)

 * 8 replies
 * 2 participants
 * Last reply from: [the.mnbvcx](https://wordpress.org/support/users/themnbvcx-1/)
 * Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-background-images-for-sections/#post-6920115)
 * Status: not resolved