Background size causing bg images to flicker

[booRocket]

First post here, so I’m sorry if I don’t get it right.

I’m using background-size: cover; to resize backgrounds to fit different sized styled links.

However, when I hover over these, the background images seem to stretch or resize just slightly, making it look they are flickering. If I remove background-size: cover, the flickering goes, but they don’t fit they way I would like them to.

Perhaps all the content inside these links is causing the issue?

This is the site: http://paulwcarpenter.co.uk/

It’s most noticable if you scroll down to the pink strange-makeup picture.

[booRocket]

Just read ‘Tips’. Sorry. I will try and recreate in Codepen tomorrow.

[shaneisme]

Also what browser / OS?

[booRocket]

Windows, and I realise it’s only Chrome that’s affected. I can’t seem to replicate the issue on Codepen – maybe I’ll just have to live with it for now.

[shaneisme]

I’m actually not seeing it on my end…

But if it’s not happening on Codepen, that means something else within the site is causing the problem (maybe?).

[booRocket]

Thanks for your help – it’s good to know you can’t see it!

The code is all a bit complicated – mainly because the images come from WordPress posts and are pulled in these boxes, and then there’s the content inside them with the stuff for the hovers, so it’s quite hard to see what’s causing it. But when I remove background-size: cover, it stops, but I guess that doesn’t necessarily mean it’s the cause.

[Author]

Posts