Fullscreen Responsive Background Image

Support
#1

I’m trying to make a fullscreen background image in a section. I’m using a 1920x1333 image - but it cuts out unless i mess with the padding. Which - i’d like it to be responsive regardless of screen size. Please advise -

Thx,

#2

Hello There,

Thanks for writing in! The background image in the section is set to cover the whole area. It is positioned at the middle of the section and will try to cover the whole section. The longer the section it gets, the more cropped is the background image.

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 works.

Hope this helps.

#3

thx for the response - can you tell me how to implement a hero image on the home page? do i need to add some custom css - background; cover or something? the article made sense -just not sure how to implement it on my site.

thx

#4

Hi,

To further assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

#5

https://johnroach4life.com/

thanks again,

#6

If you can afford to lose parts of your image, add it as the Section’s background. If you need to show all parts of your image, use an Image element and add width:100% to it’s Style field if your image’s width is less than the size of the container. Then, disable Column Container under the Row settings and set your Section’s padding to 0px. Please see https://youtu.be/WhKBBP7Nh2s in case you don’t get what I mean.

Thanks.

1 Like
#7

thx for the response - i made the changes but the image does not look the same on laptops and desktops. on laptops it’s too long - but on a 27" it’s perfect. If I set it perfect for the laptop - it crops on the desktop.

thoughts?

#8

Hi There,

Please review the first reply by Ruenel, that means you can not fit your background-image on all screen sizes. Imagine you’re fitting a square image on a rectangle canvas without stretching or squeezing it, please watch this clip because this is what it is now. And have you tried to preview your page in mobile? See how the background-image looks.

There is no way around this but to accept that some parts of the background-image will be crop, unless you can write a JavaScript that will change your background-image depends on what screen-width your page is viewed.

This is what I can advice, remove the top and bottom gap that you add to your section.

Add height: 100vh; on your ROW’s STYLE field, with this the section will cover the entire viewport regardless of the viewers screen-width.

Add this background-position: right bottom; on section’s STYLE field, your background-image will be crop, but good thing we can choose which area of it to be focus. I think bottom-right would be the best spot for desktop and mobile view. You can try other spot and see which is best.

To center your custom headline (GET N2 LIFE), please add a CLASS man to it. And then add this on its STYLE field:

position: absolute;top: 50%;width: 100%;

Hope this shed some lights,
Cheers!

1 Like
#9

awesome - i think we’re there:)

#10

Glad to hear that, Cheers :slight_smile: