<!DOCTYPE HTML>
<html>
<head>

<style>

div1 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
}

div2 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: border-box;
}

div3 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: content-box;
}

</style>


</head>

<body>

<div id="example1">
<h3>  (پیش فرض)backgroun-origin بدون</h3>
<p>تصویر بک گراند از گوشه  بالای سمت چپ اززیر کادر شروع می شود</p>
<p>این متن به منظور درک و فهم بهتر نتیجه کد ها برای بیننده نوشته شده است</p>
</div>

<div id="example2">
<h3>  border-boxکلید واژه </h3>
<p>تصویر بک گراند از گوشه سمت چپ از قسمت بالای شروع می شود</p>
<p>این متن به منظور درک و فهم بهتر نتیجه کد ها برای بیننده نوشته شده است</p>
</div>

<div id="example3">
<h3>  content-boxکلید واژه </h3>
<p>شروع تصویر از گوشه سمت چپ بالای محتوا</p>
<p>این متن به منظور درک و فهم بهتر نتیجه کد ها برای بیننده نوشته شده است</p>
</div>

</body>
</html>

(پیش فرض)backgroun-origin بدون

تصویر بک گراند از گوشه بالای سمت چپ اززیر کادر شروع می شود

این متن به منظور درک و فهم بهتر نتیجه کد ها برای بیننده نوشته شده است

border-boxکلید واژه

تصویر بک گراند از گوشه سمت چپ از قسمت بالای شروع می شود

این متن به منظور درک و فهم بهتر نتیجه کد ها برای بیننده نوشته شده است

content-boxکلید واژه

شروع تصویر از گوشه سمت چپ بالای محتوا

این متن به منظور درک و فهم بهتر نتیجه کد ها برای بیننده نوشته شده است