Fullscreen Image on Content Page

[L-A-R-S]

Hi,
sorry for stealing your time again. But I have a problem.
I need an image as fullscreen in normal Content Page:

Luxuriöse Ferienwohnungen „R6-Tegernsee“ - Bad Wiessee am Tegernsee

pw: Anton

I chose the Fullwidth Layout in the Page Settings and selected one Background Image.
But it doesnt show anything in the frontend

Or if i try it in cornerstone, I cant get the Section in fullscreen as in this video I found in the forum:

Thanks alot for help.
Lars

[basanta]

Hi There,

Can you please send your login details in a secure note so that we can have look at the page/layout setting setting for you.

Thanks

[L-A-R-S]

Oh didn´know thats possible.
THanks for the great service!

[ruenel]

Hello There,

If you want to have a fullwidth image, you must use the Blank - No Container page template. This is to have a fullwidth section with no borders around it. In your section row settings, the inner container must be turn off too. You will then need to make sure that the image is wide enough or stretch the image by setting the minimum width as 100%.

If you want to image to be fullscreen, you must set both the width as 100% and set the the height to 100vh. This method will not be a good idea because the image with be stretch out and will not look good in some screens.

The best way to do it is to have the image as a section background. Instead of using a gap, you will have to set a minimum height of the column as min-height: 100vh so that it will become fullscreen.

Please check out my test page. See the secure note.

[L-A-R-S]

HI there,
thanks for the example and your time.
Yeah, great it works well. Only the image gets some zoom, but thats probably not avoidable.

But I see in your example it does not. The first picture is an Image Element. That won´t work because I cant put content infront of it. But in your second section the image is very well sized. Where did you put the min-heigt: 100vh?

[rad]

Hi there,

It’s added in column’s Inline CSS option under Customizer section. You may use a background image too instead of an image element so you could add any content above it. And still, add minimum height to your section or column’s inline CSS option.

Thanks!

[L-A-R-S]

Hi there,

sorry I really don´t get my mistake. I added the image as the background lower layer and added the in the custom css the “min-height: 100vh” but still i get this crazy zoom in the background image

I added two screenshots one is from me and the other is the example which RueNel did.
Its pretty much the same setup…
Only if I change the size, I get a better image quality. But then it wont fit for big screens. Sorry I don´t see where Im oversseing sth.

[ruenel]

Hello There,

Thanks for updating in! Before containing with you idea, you have to understand first how the background image works. With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image size display within the container.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps.