# Blocks Promo-3 Image Sizing

**URL:** https://forum.pinegrow.com/t/blocks-promo-3-image-sizing/557
**Category:** Blocks
**Created:** [January 1, 2017, 12:41am UTC](https://forum.pinegrow.com/t/blocks-promo-3-image-sizing/557 "2017-01-01T00:41:13Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![RatPack](https://avatars.discourse-cdn.com/v4/letter/r/c37758/32.png) [@RatPack](https://forum.pinegrow.com/u/RatPack)
#### Post date: [January 1, 2017, 12:41am UTC](https://forum.pinegrow.com/t/blocks-promo-3-image-sizing/557/1 "2017-01-01T00:41:13Z")

</div>

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

**Image when put into promo-3 block:**

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/4c35bbeb09a545fe462e2990caf20cf8c9a27ac8.PNG)

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.

---

<div class="post-metadata">

### Author: ![Jack](https://avatars.discourse-cdn.com/v4/letter/j/cc9497/32.png) [@Jack](https://forum.pinegrow.com/u/Jack)
#### Post date: [February 14, 2017, 11:16pm UTC](https://forum.pinegrow.com/t/blocks-promo-3-image-sizing/557/2 "2017-02-14T23:16:43Z")

</div>

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

![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/cce91a8860a7c02ea5814d13edb5b385049161c5.jpg)

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/0ec2da4cc716a27a843d12dc839718b50a99b50a.jpg)

---

<div class="post-metadata">

### Author: ![Jack](https://avatars.discourse-cdn.com/v4/letter/j/cc9497/32.png) [@Jack](https://forum.pinegrow.com/u/Jack)
#### Post date: [February 15, 2017, 7:19pm UTC](https://forum.pinegrow.com/t/blocks-promo-3-image-sizing/557/4 "2017-02-15T19:19:19Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Jack](https://avatars.discourse-cdn.com/v4/letter/j/cc9497/32.png) [@Jack](https://forum.pinegrow.com/u/Jack)
#### Post date: [February 16, 2017, 12:53am UTC](https://forum.pinegrow.com/t/blocks-promo-3-image-sizing/557/5 "2017-02-16T00:53:30Z")

</div>

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.
