Full screen image in pro

Hello,

I have to setting a full screen responsive image in my home page. As you can see https://www.lorenzoadorni.com/wp/ I have some problem with the different elements and levels of configuration of pro.
How can I solve this problem?

Hi there,

Please add this code to the Element CSS of the section:

$el {
  height: 100vh;
}

Hope this helps.

Thank You.

The code works, but the section is not responsive, in the fact the image is cut depending of the screen size… There is a solution for have a 100% screen size, with a no cut image ?

Hi There,

Instead of adding the background image to your section, please add the image element to your section.

After that add this element CSS to your image:

$el img {
	height: 100vh;
}

Hope it helps :slight_smile:

Ok,
I have insert a an image with the css, but the image is not responsive, is distorted…

Hi La,

It’s due to static width, please change it to this

$el img {
	height: 100vh;
        width: auto;
}

Hope this helps.

Hello,

Seems that nothing change. I think there is another setting that could affect the image…

Hey LA,

Sorry for the confusion. Please remove all the code given here except the one given by @Jade to make the section fullscreen.

Then, tell us what is the end result you’re looking for each of these screens: desktop, laptop, tablet and phone? Take note that those screens have different aspect ratios. If you’re don’t know what aspect ratio is yet, please see https://en.wikipedia.org/wiki/Aspect_ratio_(image). With that said, do you really want full screen for all screen widths? Your image does not match the common screen aspect ratios so your choices are to squish and/or stretch the image or crop it. This is just a spatial or physical limitation and not because of the theme.

If you change your mind about fullscreen, remove the code given by Jade also and just let the image dictate the size of the section. Set the Image element’s width to 100% in case you’re using a 4k monitor or screen.

Are you also looking for adding text overlaying the image? The image element is not the option for this case. The background method is the right option. Please see the Background partial tutorial at https://theme.co/apex/forum/t/elements-using-partials/213

Please show us through screenshots and/or detailed description what you want to achieve in different screens and we’ll give you the correct setup.

Thanks.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.