Background-image, padding and border

Question

I have a <div> filled with a background image. I am able to add a black border. But now, I want to have a padding around the background image, but it seems like a background color of white. How do I do this like the example below?

Many thanks in advance.

Answer 1

You can try using the background property background-origin: content-box

Example JSFiddle

Answer 2

Not with a singular HTML element, but if you can spare the ::before pseudo element of the div, it's possible.

Move the div down and to the right by the width of the white border, then make the ::before larger than the div itself by twice the width of the border.

 .backgrounded { width: 400px; height: 300px; background: url(http://lorempixel.com/400/300); position: relative; left: 8px; top: 8px; color:black; text-shadow:1px 1px white; } .backgrounded:before { display: block; content: ''; width: 414px; height: 314px; position: absolute; left:-8px; top:-8px; z-index: -1; border: 1px solid black; } 

 <div class="backgrounded">This is the div</div>