Cover image to always fit full screen

  • Resolved ilan76

    (@ilan76)


    4 years, 1 month ago

    Hi,

    I’m trying to create a Hero image that can always fit the entire screen with same scale, no matter which size the screen – exactly like Tesla site:

    https://www.tesla.com/models

    On different screen sizes the image always cover the entire screen with same scale, even if I zoom in or out.

    How can you set this up?

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor codersantosh

    (@codersantosh)

    Hello @ilan76,

    Here are my suggestions.

    • Add Container Cover Block
    • Add Background Image and from the options select Background Size : Contain and Background Position : Center
    • From the Height options Enable Height, select vh and add value 100
    • You may try other options from Background

    And make sure you are using Full With or Canvas Gutentor Page Templates or any full width templates available on your theme.
    You can also create one section for desktop and another for mobile with a different image that fit on different devices.

    Best Regards!

    Thread Starter ilan76

    (@ilan76)

    Thanks for the quick reply @codersantosh.

    Looking much better towards the desired results but the image scale still isn’t kept exactly for all sizes, same as on Tesla website:

    https://www.tesla.com/models

    Plugin Contributor codersantosh

    (@codersantosh)

    @ilan76 with some design knowledge I think you can create better than Feature Block 1 Demo . You can create similar effect with other methods with Gutentor but here are my suggestions:

    • You should have two images, horizontal image for desktop, vertical image for tablet/mobile
    • Create one section for desktop by following above methods and hide on tablet and mobile from Display Mode options. Use horizontal Image for desktop.
    • Create next section for tablet by following same methods and hide on desktop from Display Mode options. Use vertical Image for this.
    • Play with image size and Background Options of Gutentor.

    Best Regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Cover image to always fit full screen’ is closed to new replies.