Test vlastností background-clip a background-origin
background-clip
div bez background-clip se chová jako border-box. Bez background-origin se obrázek pozadí kreslí do rohu paddingu.
div s background-clip: border-box; se chová stejně, jako kdyby background-clip nebylo nastaveno
div s background-clip: padding-box; vykresluje pozadí jen pod paddingem, pod rámečkem už ne
div s background-clip: content-box; vykresluje pozadí jen pod obsahem
div s background-clip: text; většinou nefunguje a chová se jako border-box, ale jednou bude jen pod textem
background-origin
v divu bez background-origin se obrázek pozadí kreslí do rohu paddingu, chová se jako backgroun-origin: padding-box.
div s background-origin: border-box; posouvá obrázek pozadí do rohu rámečku. Vidíte ho, protože border mám poloprůhlednou barvou.
div s background-origin: content-box; posouvá obrázek pozadí do obsahu mimo padding
lineární gradient se chová jako obrázek, tedy bez nastavení background-clip nebo background-origin se vykresluje jenom pod paddingem
Příklad se vztahuje k vlastnostem
background-clip a background-origin,
popisuji to taky u vlastnosti
background a
background-position.