background-clip and background-origin - what's the difference? Thank.

    1 answer 1

    The difference is as follows:

    background-origin places the background image according to the value of the property.

    background-clip CUTS the background image or background color according to the property value. If the background image was pressed to the outer edge of the border, only the part of the image that is inside the border ( border-box ) or inside the border + padding ( content-box ) will be shown. If the padding-box value is set, then the whole picture will be complete.

    In general, an example here: https://jsfiddle.net/q86uk2kh/embedded/result/

    • I understand that when border-box , the whole background -a image will be shown (although its part will not be visible (if border: solid with transparency at 1 ), because it is under the border ). When padding-box, the part of the image that is under the border will be cut off, and the rest of the image that is in the padding area and content will be visible. And with the content-box, all part of the background -a image is clipped except for the one in the content zone. I understood correctly? - hidd
    • Exactly. Just keep in mind that this works if you combine both background-origin: border-box; properties background-origin: border-box; and background-clip . - mantigatos