Hey Galini,
first of all, thank you for the purchase!
There are two ways an image background size is set in Kanso depending on whether the parallax effect is on or off:
– if it is off, the backgrounds have the “background-size: cover” CSS property, which ensures that the image always fills the entire background, regardless of the screen width of the particular device; this also means that the image will most likely be cropped from top and bottoms for the width to always match the screen width. This is the most commonly used CSS method for auto-fitting image backgrounds to objects that might shift in size.
– if the parallax is on, the “background-size” is set to “initial”, i.e. full image size; this is needed because the parallax will simply not work with the “cover” CSS feature.
In your case, you are trying to achieve something that requires a compromise: as far as I understood, you need the background image to fit both by width and by height into the respective page section. Given that your visitors will have varying screen widths yet the height of the section does not change in proportion to the width, rather depending on its content, the fully fitted background could be achieved on a very limited number of screen sizes with needed combinations of width and height that are proportional to the image dimensions. The only option I could recommend, apart from rethinking the section, is setting the following CSS property:
#page-holder-21 { background-size: auto 100% !important; }
(you can add custom CSS into the “Style: Add Custom CSS” tab of the Theme Options panel). This expression will tell the background of the “About JIG” section to fit by height, thus always displaying all portraits in full. As a “side-effect”, however, the width of the background will not always fit the screen width entirely, leaving blank space on the sides.
Sincerely,
Andrii / Satori Studio