[Plugin: Background Manager] Image Squish

Hi and thanks for this awesome plugin!

I finally found this plugin before starting to make my own after trying out many others that I did′nt like. This has all the features that I wanted plus more!

But like Michael, I would like the background image to always stay porportional when I resize my browser similar how the Supersized plugin works for example.

Hope you can take a look at this feature request.

Best regards,
Andri

Hi!

It is controlled by CSS (the exact file is in wp-content/plugins/background-manager/resources/css/pub(.dev).css in case you’re interested – if WP_DEBUG is true, it uses the one with “dev” in the filename).

Currently, the width of the browser window takes precedence and adjusts the image according to it. But to keep the entire screen filled, it also stretches the image height to 100% (otherwise leaving an “empty” bar). This particularly causes that “squishing” on very wide images.

So if the images are generally wide overall, this can be changed by modifying .myatus_bgm_fs to:

.myatu_bgm_fs {
    min-width: 100%;
    width: auto;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

This would essentially reverse what it does now (and so, narrow images could end up looking “squished” – if images are large enough, you can remove the height: 100% portion) – Hint: use the Custom CSS metabox.

Obviously this is a temporary fix, as the whole idea is to do no file editing at all ?? I’ll look into better ways to keep the aspect ratio correct at all times, whilst ensuring the entire screen remains covered.

Version 1.0.24 has been released today.

This version includes CSS changes, that changes the way full screen backgrounds are displayed and will stop the “squishing” described. This also required some Javascript changes for the transition effects.

Extremely large images may need to be reduced in size using the current display method, and I will continue to improve upon that.

Myatu,
Thank you for your work on this plugin and responding to my questions. I’ve updated to 1.0.25 but my images are still squishing.
What size do you recommend using for landscape oriented shots?

Hi!

Do you have any examples of the the image squishing (sample image or URL)?

As for the size, using the common 16:9 wide-screen format, 1920×1080 or less (width in pixels * 9 / 16) will work well for most visitors.

Mike (Myatu)

Here is a demo site that we are currently building.
https://ecg-ministry.com/

Thank you for your time.

Thanks! I just had a look and there’s a CSS (stylesheet) entry that appears to be changing the intended behavior of the full screen background.

In the file styles.css for the theme, there’s the following entry:

/* Images
------------------------------------------------------------ */

img {
    height: auto;
    max-width: 100%;
}

This disallows the background to adjust the width (and causes squishing, as it can only adjust the height).

What I can suggest is, from within Background Manager, edit the Image Set containing the images and in the Custom Stylesheet box add the following:

.myatu_bgm_fs {
max-width: 1280px;
}

And then save the Image Set. This should address the squishing you’re experiencing – at least minimise it, without having to edit the theme directly. You can adjust the size after “max-width:” (ie., 1024px, 1280px, 1920px) to suit your taste/needs.

BAM! Great catch! Thank you very much