Background Image to resize

Still no joy with this issue

Any luck with this? I am having the same problem…

Hi there!
try to fix it with Photoshop, you can read about it on FixThePhoto

Hi Se7en, you’ve achieved what I’ve been trying to do for a while, but my efforts haven’t produce the desire scaling effects. would you mind going over the above stated instruction again but in Blocs 3?

Cheers

Hi Chris, did you ever get some light shed on how to achieve the flawless Background Image resize? I’ve been trying to achieve the same effect with no success, getting help on this as proven to be a task in it self.

Cheers

Up help on this someone please :upside_down_face:

Sorry peeps,I didn’t resolve this :frowning:

@Chris What you have to understand about background images is that they fill the bloc in which they are placed. If you have a landscape image, the height of the image will generally be the deciding factor in deciding how the image gets placed - in other words, the image will tend to fill the height of the bloc and any excess width will be cropped by the width of the viewing device. If you think about this logically, this makes perfect sense.

In a desktop page, the bloc will generally be a landscape orientated rectangle. Therefore, the image will display mostly at full width. However, as the viewing device gets narrower, less of the image will be visible on each side. This is because the orientation of the bloc has changed. If the background image simply rescaled, it would no longer fill the bloc - it would just reduce proportionately - just like a normal image bric. This will create other problems, depending on the content of the bloc.

The height of a bloc is determined by the content you place in it and the padding that you apply to the bloc as a whole. This may cause the bloc to be more portrait orientated as it gets longer to accommodate the content. When this happens, the background image enlarges to fill the height of the bloc, which means less of the left and right of the image is visible. If you had a situation where the background image simply scaled, you could end up with white space under the image. See the example below:

In view of the this effect, it is usually better to make 3 or 4 image variants, each suited to a particular device. Because mobiles and tablets have a fixed width (as opposed to desktops and laptops where the browser window can be adjusted in size) making alternative images for mobile devices is fairly simple. You can get the dimensions of each device screen from Blocs app itself. Just select a device from the top of the interface, and see the dimensions at the bottom of the interface:

Now, open your image editing application and create a new image canvas the size of the device you’re creating for. Import your chosen image and scale it to fit the height of the canvas. Then move the image from side to side so that the main subject area appears in the centre of the canvas. In the example below, I created a canvas 577 x 768 pixels (small device portrait).

Now export the new image and use this as the background for the small device variant of your Blocs project. To do this, duplicate the original desktop bloc and replace the background image with this new one. What you will notice (if you set the image to fill the bloc) is that you will see a much enlarged partial image as the background. However, if you switch to the small device layout, you will notice that it fits perfectly.

All you then have to do is make the duplicated bloc visible ONLY on the small device variant. You do this by checking the visibility options in the properties panel. You will also have to do the same on your desktop variant by making it visible ONLY on the desktop variant. Repeat this process for the other device variants. Duplicate the bloc and change the background image, and then set the visibility options.

3 Likes