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.
Can we see the code? Maybe there is some CSS involved? We really need more info.
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’);”
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/
Download the “L” option and use image software to compress the size.
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.
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
You can also add fixed to the attachment rule (if you want parallax) but this doesn’t work on Safari (applemac)
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.
Check out this video from @matjaz
Explains the basics of CSS and he actually starts off with background image change!
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 but it doesn’t show up on actual iPads from my client. All they see is a light blue background. 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?
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.
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
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?
@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.
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.
Always better to answer your own questions. You learn more.
1 Like