Control size of background picture

I think I have it down mostly, but can’t figure out how to better control how the background image resizes. I have “full” checked would expect the image to go as wide as the window, but it resizes wider than the browser so parts of the picture edges are not visible.

This is the original pic I’m using -

but if you look at the site, you’ll see that when it fills the background, top/bottom/left/right go outside of the viewable area of the background - like it’s filling it too much (sorry if that’s not a very good explanation). And when the window is resized, often the left side of the image - me - will get pushed out of the viewable area.

BTW, it’s not until you take the browser window to almost full screen that you get to see the outer edges of the picture.

it’s the same with all the pics - like the fill setting is zooming in too far and the top/bottom/sides of the images aren’t visible until you increase the size of the browser window almost full screen.

I would think that “fill” means to resize the image as needed to the edge of the browser, not push part of the image past that. make sense?

I just can’t see there are any more controls over how the background image behaves other than the style settings.

Hi @sc00termac

I’ve PM’d you with a link to a zip with a test .bloc.
I hope it helps you :+1:


1 Like

So, what happened with this? I have the same issue. As I understand it, the “fill” setting is the only one which will guarantee full horizontal coverage. My main picture has a guys head very close to the top, and it’s getting cut off. My thought was to add padding or margin somewhere, but I can’t see where.


It would be nice if you could upload the file so everyone could see. I’m having the same issues with an image after my navigation. It cuts off the top and bottom. I’d like to picture to be as wide as the width of my site.

1 Like

Here’s what mine looks like in blocs. And my intended positioning.

Here’s the browser view. Head cut off, logo pushed way down.

I see no way to control the bkgnd image when it’s in “fill”. Should be able to set an absolute top value. Or something…?

Hi guys, i must be to tired, i managed to answer this post in another thread…lol
But here’s what i intended to answer here.

It’s nothing fancy but basically you align the bg image to the top left (or right).
And adjust the height for desktop, tablet and mobile in the “bg-image” class.
It will then scale down when down sizing the browser.
And keep the top left part at all times.
And it will look ok in desktop, tablet and mobile.

Demo page

Download the Block file

Cheers / Johny


Thanks for the reply on this thread and for your email assistance and the bloc file with the class setting

However, what I have found is that when I enable parallax setting, that’s when the picture gets larger and expands outside of the browser window.

I opened a ticket with the support company and while they were very responsive, they basically said the parallax implemented in blocs was fixed.

Here’s the exact response:

I’m afraid this is a side effect of using the css rule background fixed. I’m not aware of a work around to address this while using the current parallax technique Blocs uses. What you could try doing is creating an image with an extended border around the outside ( inside Photoshop/pixelmator) so the area of the image you don’t want cropped is located closer to the center of the image.

You can see in these samples with the bloc file you uploaded here with the background class.

Without parallax setting

With parallax setting

I really like the parallax setting on the background to allow me to have pictures in between text blocs and the pics change as the blocs scroll over them.

Any workaround you know of?

nobody has an answer or a workaround? the tech support told me there were java implementations for parallax settings - anybody point me in the right direction and will they work within blocs?