background-origin

<html> <head> <title>css Color</title> <style> .mydim{ width: 400px; height: 150px; padding: 25px; text-align: justify; border: 20px solid black; background-color: rgb(214, 160, 160); background-image: url(juice.jpg); background-repeat: no-repeat; background-size: 200px; } .myori1{ background-origin: content-box; } .myori2{ background-origin: padding-box; } .myori3{ background-origin: border-box; } .myori4{ background-origin: content-box; } /* background-origin: padding-box | border-box | content-box | initial | inherit; */ .myori-a{ margin: 0; padding-bottom : 50px;} </style> </head> <body> <h1>Background-Origin</h1>  <div class="myori1 mydim"> <p class="myori-a">Lorem ipsum dolor sit amet, cons sit amet, consectetur adipiscing elit.Nunc elit dolor, ornare in tempus vel, cursus vitae turpis.Curabitur aliquam commodo dolor vulputate porttitor.Vivamus ut sodales lacus, in semper libero. Phasellus malesuada tincidunt elit vitae feugiat. </p> </div></br> <div class="myori2 mydim"> <p class="myori-a">Lorem ipsum dolor sit amet, cons sit amet, consectetur adipiscing elit.Nunc elit dolor, ornare in tempus vel, cursus vitae turpis.Curabitur aliquam commodo dolor vulputate porttitor.Vivamus ut sodales lacus, in semper libero. Phasellus malesuada tincidunt elit vitae feugiat. </p> </div></br> <div class="myori3 mydim"> <p class="myori-a">Lorem ipsum dolor sit amet, cons sit amet, consectetur adipiscing elit.Nunc elit dolor, ornare in tempus vel, cursus vitae turpis.Curabitur aliquam commodo dolor vulputate porttitor.Vivamus ut sodales lacus, in semper libero. Phasellus malesuada tincidunt elit vitae feugiat. </p> </div></br> <div class="myori4 mydim"> <p class="myori-a">Lorem ipsum dolor sit amet, cons sit amet, consectetur adipiscing elit.Nunc elit dolor, ornare in tempus vel, cursus vitae turpis.Curabitur aliquam commodo dolor vulputate porttitor.Vivamus ut sodales lacus, in semper libero. Phasellus malesuada tincidunt elit vitae feugiat. </p> </div> </body> </html>