Scalable picture

Hi, peka is back! I was in Blocs community last in October last year. Now I have again time to study and continue practice with Blocs App.

First of all I have placed background image on my first block. What are the settings that the image is scalable in the browser window?

I will explain a little bit more my question. I know that in responsive site there must be three different size of pictures; one for desktop, one for tablet and one for mobile. But on desktop mode we could have several different size of screens and resolution and it could be nice have a scalable picture after used screenresolution. Whether is it possible at all have the picture also scalable in desktop mode even though we are actually doing responsive site?

I think what you are asking is if it’s possible to have multiple size images as background images. If this is the case, then it really isn’t worth the hassle. Background images will scale by default, but there is only an option to set one image at one size. For most people, this is more than adequate. Just make your background images about 2500 pixels wide. Optimise the images for the web and just use that. This will cater for most of the larger screen resolutions and will be be perfectly clear. This image will then scale down in size on smaller devices without any perceivable loss of quality. In many cases, you can use images of 1600 pixels width and still get a very acceptable quality on larger screen resolutions.

Sometimes the scaling just doesn’t go well, so often I’ll make a mobile-specific bloc and have a mobile-specific image for that size. What might look great on desktop as a bold expansive image needs to be an intimate closeup on mobile.