Resize backgroud image in container block

This thread is resolved. Here is a description of the problem and solution.

Problem:
The issue here is that the user wanted to change the size of their background image that is attached to their container.

Solution:

This is actually possible and the details of the solution including a screenshot can be seen in the forum post below.
https://toolset.com/forums/topic/resize-backgroud-image-in-container-block/#post-2069425

This support ticket is created 3 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	-
-	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	14:00 – 18:00	13:00 – 18:00	-

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 5 replies, has 2 voices.

Last updated by yulyaB 3 years, 6 months ago.

Assisted by: Shane.

Author

Posts

May 26, 2021 at 5:21 pm #2069157

yulyaB

Hello, i'm try to set backgroud image for container block. Sometimes attached images can be large in size over 1290 px and more. The container requires a small size, for example 208 * 180 px. How to auto crop an image that is inserted into a container.

May 26, 2021 at 6:50 pm #2069255

yulyaB

I'm find some solution, but it is not simple: hidden link

<div style="background-image: url('[types field='thumb-image' width='185' height='125' url='true' resize='proportional'][/types]'); width: 200px; height: 125px;background-size:cover;">Your content here</div>

How can i do this in container block?

May 26, 2021 at 8:58 pm #2069425

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Yulya,

Thank you for getting in touch.

Given that you are using the container block there should be the option to setup the dimensions for the background image. See Screenshot.

Are you able to see these options for your background image?

Please let me know.
Thanks,
Shane

May 27, 2021 at 2:11 pm #2070239

yulyaB

Yes, I can see it, but the image is not compressed in size (meaning that it does not become smaller in KB and px), but simply decreases visually.

May 27, 2021 at 3:13 pm #2070335

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Yulya,

You're saying the background image actually decreases in terms of size on the page but not in KB ? Is that correct if I understand.

This would be the case since you're not using a new image but you're using the original image at a reduced scaling, so the original image and kb size is being used.

If you want the image kb to be reduced then you will need to employ some kind of plugin that is able to compress the image size itself.

Thanks,
Shane

May 27, 2021 at 3:21 pm #2070347

yulyaB

Yes, that's right, I realized that there is no way to compress the image using standard methods.
My issue is resolved now. Thank you!