Pinegrow Community Support Forum

Blocks Promo-3 Image Sizing


Hello folks, Happy New Year.

I have a quick question about the Promo-3 Block. If you examine carefully enough, you will notice that all images put into the background of this block are not scaled 100% to the block. The bottom portion of this block is cut off, and subsequently the image. Here is an example of what I am talking about:

Original Image (due to new user restrictions, I have to give you a link to it, remove the " at beginning and end of link):

Image when put into promo-3 block:

I have edited the Promo-3 block up a bit but I do not believe that I affected it much via removing some other parts. Any suggestions on how to fix this?
Apologies for the noobie question, I am pretty new to this and appreciate the help.
Thanks in advance, and once again Happy New Years everyone.


You may have found the answer by now, but for anyone viewing who has the same issue this is the CSS needed.


I should add the CSS I use is for responsive background images - it really depends on the image used and the size of your section/div.

For example if you include the CSS as above and your image has an individual, you may find their head is cut off! you may have to adjust the section/div using media queries depending on the screen size.


Just to follow on from that reply as I’m currently working on a website where instead of the above CSS, I would remove “center” as it allows for better coverage of certain images without needing to add media queries.