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!
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?
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.
Yep, that’s what I meant. Looking at the uploaded image files it seems the theme does part of the job, but the @media rules as described in this article are missing.
I tested the theme’s demo site on 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.
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.
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";
}
}
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
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";
