Resize Media Library image?

[Richard]

Hi Tom,
My uploaded home page background image is cut off on the right side.

The image is very large (2716 x 1810px in a jpeg) in the Media Library.

I think I should resize (scale) it in the Media Library to 1263 by 842, and then upload it again.

Does that make sense?

Thanks.
Dick

[Tom]

Hi Dick,

This should be helpful: https://en.support.wordpress.com/images/image-editing/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Richard Robinson]

Hi Tom,
I scaled the home page background image from the original 2616 x 1810px to 1263 x 842px in WP/GP but have same problem.

The right side of the image, showing the watering can, is still cut off?

What is causing this? What can I do?

Could you please look at the site?

Note: I am using the Visual Editor widget.

Thanks.

Dick

[Tom]

It’s most likely the aspect ratio of the image vs the aspect ratio of your screen.

Background images won’t always show the entire thing unless you set the size to “100%” or “Contain” in the settings.

Using “Cover” will cut off pieces of the image in order to cover the entire screen.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Richard Robinson]

Hi Tom,
Thanks for taking a look…

But I’m puzzled on how to correct this.

I tried the Row Layout set at “Full Width Stretched” instead of “Full Width”. No change.

I tried the Background Image Display set at “Centered, with Original Size” and no change.

How do I “set the size to ‘100%’ or ‘Contain’ in the settings? Not finding those settings in Row Layout or Background Image Display.

Thanks.
Dick

[Tom]

Hi Dick,

Are you using a specific plugin? I’m not familiar with options called “Row Layout” or “Full Width Stretched”?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Richard Robinson]

Hi Tom,
Those terms are in a widget/plugin, PageBuilder by SiteOrigin.

Its Visual Editor contains:
— Layout options, such as Row Styles > Layout > Row Layout > Full Width and
— Design options, such as Background Image Display > Cover.

Take a look on my site.

Thanks.
Dick

[Tom]

The “Cover” option is what is giving you problems.

As a rule I only ever choose backgrounds that are ok to be cut off – it’s very hard to stop when it comes to CSS backgrounds.

I’m not too familiar with the plugin, so I can’t help much there.

They have a support forum as well if you want to ask them what the best way to choose a different background image display is.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Richard Robinson]

[Sent private email to Tom.]

[Author]

Posts