Backstretch featured image is pixelated and blurry on mobile

The plugin attempts to be somewhat responsive and load smaller images on smaller screens. Depending on your image ratio compared to the screen ratio, that may result in some blurriness, but it should not be noticeable. Do you have a link with an example? Generally, I upload images that are no smaller than 1800px wide, and 1200px tall. If you use really short images, you may experience some funky results, unless you limit the .big-leader height on small screens, as in the FAQ. I generally prefer to add this kind of style rule anyway, because I don’t necessarily want the image to be all that large on mobile.

The image itself can’t really be styled from your CSS, because as you’ve found, the image itself has a lot of inline style added to it, so you can’t override it. (You can try targeting .backstretch img, but if the style you want to add is present in the inline style, it will be overridden.)

If you have a link and can share what you’re wanting to accomplish with the styling, I may be able to offer some guidance to get you closer to where you want to be.

Hi Robin,

Thank you so much for getting back to me! I have un-ticked the do not display featured image box on this page so you can have a look:

https://twowolvescreative.uk/the-watergate-wax-company/

The image I am using is 1920×1080, so not a small image. I am not necessarily set on having the featured image a full screen on mobile, just larger than normal and to the edge…as long as it’s super crisp!

Thanks in anticipation of your help,

All the best

Okay, I see what’s going on with that specific image–it’s because it has the logo element in there. I can think of a couple of immediate options for you here:

What I would recommend for the moment, pending any plugin changes, is to replace the featured image with a smaller copy of it so that the backstretch effect isn’t implemented. If the featured image is the width of your site’s large image or smaller, the image will be centered above the title/content, instead of doing the backstretch deal. (Default large width is 1024px)

One option, which is really only a temporary one because it modifies plugin files which would be overwritten with the next plugin update, is to find the class-displayfeaturedimagegenesis-output.php file and look for these two lines (lines 149-150):

'large'        => $large[3] ? esc_url( $large[0] ) : '',
'medium_large' => $medium_large[3] ? esc_url( $medium_large[0] ) : '',

and comment them out. These lines enable the plugin to load smaller images on mobile screens to save bandwidth. This solution is just a temporary one, but in the meantime, I can look into maybe implementing a plugin filter to disable this responsive behavior, which you could use when it’s available.

You could use the smaller image size for now and keep an eye out for the next plugin update and swap it out when this filter might be available, too.