background-size: cover not working with box-sizing: border-box

Viewed 45

Seeking some help with a responsive background image I have a border around.

I've been able to use background-size: cover in <div>s that have fixed dimensions. I am trying to create an "inner border" that's transparent in this demo.

In creating a border that is drawn from the inside, I'm using box-sizing: border-box.

Can someone help me understand why the background image isn't fully covering the div?

Thanks in advance.

1 Answers

As temani-afif said use: background-origin: border-box;

This solved my problem with the use box-sizing: border-box on a span with a background image that was resizine when a border was applied of a different size.

Related