size container to background image set to ‘contain’

  • Resolved acp693

    (@acp693)


    1 year, 5 months ago

    I’ve been puzzling on and off for the last few days how to do this? Is it possible without extra code? I have a container with a background image set to ‘contain’, but the container doesn’t adjust itself to the dimensions of the background image. I’d like the image to be full width to match the header and the height to adjust automatically when resizing of the window. In other words, the background image is always shown in it’s entirety, not cropped and the width is always the full width of the header section when resizing with the height of the background image adjusting automatically. Can anyone give me any tips how to achieve this?

    • This topic was modified 1 year, 5 months ago by acp693.
    • This topic was modified 1 year, 5 months ago by acp693.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support ying

    (@yingscarlett)

    Hi there,

    The issue you described is normal behaviour. When setting the background image size to contain, it means the background image will show fully within the scope of the container, not the other way around.

    In your case, you shouldn’t be using background image, but an image block instead.

    You can then set the image block’s width to 100%.

    Let me know if this helps!

    Thread Starter acp693

    (@acp693)

    Thank you so much for your prompt reply! My problem is that I want to display a much smaller image centred over the background image in the container, as in the attached pic. How could I achieve this so that the smaller image stays centred when resizing the window?

    Plugin Support ying

    (@yingscarlett)

    So there will be a headline block and an image block in the container?

    Thread Starter acp693

    (@acp693)

    The text saying “cnc machining” is an image on top of the background image.

    Plugin Support fernandoazarcon2

    (@fernandoazarcon2)

    Hi there,

    Set the display of the Container Block to flex. Then, set it to align center horizontally and vertcally.

    This should ensure that anything you add inside it will be centered all the time.

    Plugin Support fernandoazarcon2

    (@fernandoazarcon2)

    Hi there! We haven’t heard back from you for a while now so we’re going to go ahead and set this topic as resolved. Feel free to reply if you need any more help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘size container to background image set to ‘contain’’ is closed to new replies.