Blocks Promo-3 Image Sizing

Blocks
1

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):
“https://static.pexels.com/photos/106399/pexels-photo-106399.jpeg”

Image when put into promo-3 block:

example.PNG714×646 368 KB

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.

2

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

Selection_012.jpg1079×685 154 KB

4

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.

5

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.