# Image resizing noob question **URL:** \ **Category:** Pinegrow PRO\ **Created:** [February 5, 2017, 10:42pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672 "2017-02-05T22:42:56Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![Farscaper](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/farscaper/32/385_2.png) [@Farscaper](https://forum.pinegrow.com/u/Farscaper)\ **Post date:** [February 5, 2017, 10:42pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/1 "2017-02-05T22:42:56Z")
I’m working on a project where the images look great at 768px or less but are cut off any higher. Is this because the images are ideal for that size or because of some responsive setting that I’m missing? The image is actually 1428 x 1000. ---
**Author:** ![24degrees](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/24degrees/32/136_2.png) [@24degrees](https://forum.pinegrow.com/u/24degrees)\ **Post date:** [February 7, 2017, 9:27am UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/2 "2017-02-07T09:27:15Z")
Can we see the code? Maybe there is some CSS involved? We really need more info. ---
**Author:** ![Farscaper](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/farscaper/32/385_2.png) [@Farscaper](https://forum.pinegrow.com/u/Farscaper)\ **Post date:** [February 11, 2017, 5:11pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/3 "2017-02-11T17:11:18Z")
It turns out I’m an idiot who’s learned something super basic but am still stumped on a closely related issue. First I noticed that my old images didn’t have class=“img-responsive” with them. That helped site-wide. But I still have trouble with a background image. Elsewhere online they suggested this background-size:100% auto; which I’ve yet to try as I’m not sure where to embed it. Here’s my code. section id=“promo-3” class=“content-block promo-3 min-height-600px margin-top90” style=“background-image:url(‘[http://www.crimes-of-persuasion.com/ads/0757b950.gif](http://www.crimes-of-persuasion.com/ads/0757b950.gif)’);” ---
**Author:** ![Jack](https://avatars.discourse-cdn.com/v4/letter/j/cc9497/32.png) [@Jack](https://forum.pinegrow.com/u/Jack)\ **Post date:** [February 11, 2017, 6:59pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/4 "2017-02-11T18:59:00Z")
> [@Farscaper](#): > > [http://www.crimes-of-persuasion.com/](http://www.crimes-of-persuasion.com/) Firstly, don’t use .gif for many reasons but on firefox and chrome your images are blocked by my ad-blocker, so unless you want all your images to be stretched and visitors see a blank screen, use PNG or JPEG Try this image [https://pixabay.com/en/money-coins-euro-coins-currency-515058/](https://pixabay.com/en/money-coins-euro-coins-currency-515058/) Download the “L” option and use image software to compress the size. ---
**Author:** ![Farscaper](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/farscaper/32/385_2.png) [@Farscaper](https://forum.pinegrow.com/u/Farscaper)\ **Post date:** [February 12, 2017, 5:30pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/5 "2017-02-12T17:30:26Z")
Thanks. I’ll give it a try as well as adding “convert all gifs to jpg” to my list. And special thanks for the open source images link. ---
**Author:** ![Jack](https://avatars.discourse-cdn.com/v4/letter/j/cc9497/32.png) [@Jack](https://forum.pinegrow.com/u/Jack)\ **Post date:** [February 12, 2017, 6:05pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/6 "2017-02-12T18:05:48Z")
You’re welcome and I forgot to mention I couldn’t see any issue with your image being cut off. The image was stretched but that was because you was using a small image, unless I was looking at the wrong block? But for future, if you want any background image to cover the whole area, you need CSS and in PInegrow you add class to the element and the following rule: Repeat: No Repeat Position: center Size: cover ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/e924dbe9aee95b079708b0adbe591efd520a8c57.jpg) You can also add fixed to the attachment rule (if you want parallax) but this doesn’t work on Safari (applemac) ---
**Author:** ![Farscaper](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/farscaper/32/385_2.png) [@Farscaper](https://forum.pinegrow.com/u/Farscaper)\ **Post date:** [February 12, 2017, 6:13pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/7 "2017-02-12T18:13:44Z")
It was actually a different image on a site that isn’t online yet so you aren’t going blind. I must be though because I can’t ever recall seeing the above Background feature options. I’ll start looking so I can try your suggestions. ---
**Author:** ![Jack](https://avatars.discourse-cdn.com/v4/letter/j/cc9497/32.png) [@Jack](https://forum.pinegrow.com/u/Jack)\ **Post date:** [February 12, 2017, 6:23pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/8 "2017-02-12T18:23:03Z")
Check out this video from @matjaz Explains the basics of CSS and he actually starts off with background image change! ---
**Author:** ![Farscaper](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/farscaper/32/385_2.png) [@Farscaper](https://forum.pinegrow.com/u/Farscaper)\ **Post date:** [February 21, 2017, 10:29pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/9 "2017-02-21T22:29:52Z")
> **[Shot 02212017-05:23.png](https://d.pr/i/1CM9)** > > Shared with Droplr I’m having an issue with iPads and iPhones it seems. The proper background image appears to work fine in both preview mode as well as on this online simulator, [http://www.responsimulator.com/?url=www.wendysacre.com](http://www.responsimulator.com/?url=www.wendysacre.com) but it doesn’t show up on actual iPads from my client. All they see is a light blue background. [http://www.wendysacre.com](http://www.wendysacre.com) As I don’t have an iPad I can’t test things to see if they work and don’t want to seem like an idiot asking them to check every two minutes. Any suggestions? ---
**Author:** ![Jack](https://avatars.discourse-cdn.com/v4/letter/j/cc9497/32.png) [@Jack](https://forum.pinegrow.com/u/Jack)\ **Post date:** [February 22, 2017, 12:06am UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/10 "2017-02-22T00:06:40Z")
Farscaper have you used fixed attachment? This is a known problem with safari on ipad, only recently discovered this myself. There are various hacks/workarounds or remove fixed for the parallax effect. ---
**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\ **Post date:** [February 22, 2017, 9:10am UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/11 "2017-02-22T09:10:10Z")
I’m with Jack here. Parallax on iOS only works with a lil help of JS. Purely CSS obviously fails, cause fixed elements are preserved for the touch-events (somehow). And I don’t think that there will be any fixes for this ever. In the past, I then preferred removing the parallax scrolling on iOS at all by overwriting the background-attachment rule to initial. Cheers Thomas ---
**Author:** ![Farscaper](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/farscaper/32/385_2.png) [@Farscaper](https://forum.pinegrow.com/u/Farscaper)\ **Post date:** [February 22, 2017, 3:39pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/12 "2017-02-22T15:39:17Z")
Before I heard back from you I tried making it a png image but it seemed to enlarge it ten times and only show a top corner. Not so good, but potentially resizable somehow if it came to that. Note, this image is not a full page background, just the one for the top Promo block. I’ve just switched back to jpg and changed the css from fixed to scroll. No word yet on whether that might work. When you suggest removing the fixed attribute what do you recommend as the replacement, if any? ---
**Author:** ![Jack](https://avatars.discourse-cdn.com/v4/letter/j/cc9497/32.png) [@Jack](https://forum.pinegrow.com/u/Jack)\ **Post date:** [February 22, 2017, 5:58pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/13 "2017-02-22T17:58:32Z")
@Farscaper one option is keep fixed attachment for desktop/laptop but use a media query for mobile and change the image to cover/center/no repeat for mobile/tablet resolution Personally I don’t use fixed/parallax anyone, find it annoying. At first I thought it was “cool” but in terms of user experience I don’t think it adds any real value. ---
**Author:** ![Farscaper](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/farscaper/32/385_2.png) [@Farscaper](https://forum.pinegrow.com/u/Farscaper)\ **Post date:** [February 23, 2017, 11:07pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/14 "2017-02-23T23:07:53Z")
Thanks guys. Emergency averted. While I have you on the line, might I ask how you make a colored text background semi-transparent in Pinegrow? I will keep researching but I suspect it’s something I’m just not seeing. ---
**Author:** ![Farscaper](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/farscaper/32/385_2.png) [@Farscaper](https://forum.pinegrow.com/u/Farscaper)\ **Post date:** [February 23, 2017, 11:58pm UTC](https://forum.pinegrow.com/t/image-resizing-noob-question/672/15 "2017-02-23T23:58:48Z")
Always better to answer your own questions. You learn more. > [http://www.css3maker.com/css-3-rgba.html](http://www.css3maker.com/css-3-rgba.html)