Fit background Image size to fit screen resolution

Hi everybody :slight_smile:
I come from using Mobirise program this program auto size the background images to fit all kinds of screens, I am trying to achieve the same on Blocs. But I can’t :frowning: I would be very happy if someone help me :smile:


I have found something… The problem is the top menu. Without the top menu all is ok, the image fits the screen just right. I will spent a little more time trying to fix this :slight_smile:

I found 1 kind of solution with a different approach but produces an small problem… I want to achieve this using my own rows and blocs but I cannot, so I find that using a “Hero bloc” I can change the menu color (I don’t want transparent menu from hero) but changing the color leaves me a space in top --> look image:

So to solve this just add a -20 margin just like in the next image:

and for the space in the sides:

and ready!!
PLEASE Please PLEASE: If a guru see this post:
1- Can you please teach un how to achieve this without using the hero bloc?

Thanks in advance!!!

Hi @daniels1982

Add any bloc you want under the navigation menu, set its padding in the sidebar to ‘full screen’. Then, add a class to the bloc (with an image), and adjust the bottom margin to a negative value, specific to the height of your header menu bloc.

EX) If I just create a new project, and place the menu bloc (without any padding), negative margin of -56 will give me what I want.

There are actually many ways I can think of to create what you want. What I have above is just one of the possible solutions.

Best regards,

Hi!!! @Eldar
It doesn’t work :frowning: I follow all your steps (also others of my own imagination…) and same result, when you preview in safari or chrome you scroll down and there is around 2 centimeters of image at the bottom of the screen.
I send the example file I make, maybe you have a little time to tell us the solution :slight_smile:
The File:
test.bloc (726.0 KB)

test_bootsie.bloc (730.3 KB)
Have a look at this.
Instead of the “lanterns” image replace it with your image.
Put it in the image in bloc1>row>column>img

Well, the solution I have described above is basically making the next bloc overlap the first bloc with image background. You can’t see it on your test project, because you haven’t set the background color of the blog. (by default it’s transparent, even thought it is appearing white). Try to set it to white, and you will see that it overlaps your image. Make it -56 and it will work fine.

1 Like

OMG!! You are a blocs god!!! :100:%
Thank you sooo much!!!