servus servus - 2 months ago 5
CSS Question

Trying to add a padding ony my background image, tried with background origin did not work

I've got this CSS snippet:
https://jsfiddle.net/puw3wv1n/3/
Looks like this
enter image description here

1 = Main background of <html> (not important, not just for info)
2 = is just a background image about 5x5px with color
3(left) = is images/bg_l.png (shadow has alpha)
3(right) = is images/bg_r.png (shadow has no alpa, background is white


.body_wrapper {
background-color:transparent !important;
margin-top: 0px !important;
border: 5px solid transparent !important;
background-image: url(images/bg_l.png), url(images/bg_r.png), url(images/bg_bg.png) !important;
background-position: left, right, top left !important;
background-repeat: repeat-y, repeat-y,repeat !important;
/*background-size: initial,initial,cover !important; */
background-origin: content-box, content-box, content-box !important;

}


I want that "2" left and right actually get transparent but in between the "3"'s should stay. so that the shadow of 3 applies to the
<html>
background (1)

I have tried it with a transparent border, so that I can use background-origin to start the background-image "3" at the border with border-box and the background image "2" should then start in the center (inside the border) with the padding of the border(5px)

But it does not work when I set

background-origin: border-box, border-box, content-box !important;


Here is a more usefull image:
enter image description here

The overstanding color should get transparent but the color inside should stay.

Update:
Here is a fiddle I've made for that https://jsfiddle.net/puw3wv1n/3/

Answer

That was not so easy but I've found away todo that.

I've added

 background-clip: border-box,border-box, padding-box !important;
 background-origin: border-box, border-box, padding-box !important;

and got it to work

Comments