CSS ﺩﺪﻌﺘﻣ ﯼﺎﻫ ﻪﻨﯿﻣﺯ ﺲﭘ

فهرست مطالب

.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﻦﯾﺪﻨﭼ ﻪﻧﻮﮕﭼ ﻪﮐ ﺖﻓﺮﮔ ﺪﯿﻫﺍﻮﺧ ﺩﺎﯾ ﺎﻤﺷ ﻞﺼ

:ﺪﺷ ﺪﯿﻫﺍﻮﺧ ﺎﻨﺷﺁ ﺮﯾﺯ ﺹﺍﻮﺧ ﺎﺑ ﻦﯿﻨﭽﻤﻫ

background-size
background-origin
background-clip

In this chapter you will learn how to add multiple background images to one element.

You will also learn about the following properties:

background-size
background-origin
background-clip

CSS ﺩﺪﻌﺘﻣ ﯼﺎﻫ ﻪﻨﯿﻣﺯ ﺲﭘ

CSS ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﺮﺑ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﻦﯾﺪﻨﭼ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﺍﺭ ﻥﺎﮑﻣﺍ ﻦﯾﺍ ﺎﻤﺷ ﻪﺑ

ﺪﻨﺘﺴﻫ ﺰﯿﻧ ﺮﯾﻭﺎﺼﺗ ﻭ ﺪﻧﻮﺷﯽﻣ ﺍﺪﺟ ﻢﻫ ﺯﺍ ﺎﻣﺎﮐ ﺎﺑ ﻒﻠﺘﺨﻣ ﻪﻨﯿﻣﺯﺲﭘ ﺮﯾﻭﺎﺼﺗ

ﺖﺳﺍ ﻞﮔ ﮏﯾ ﻝﻭﺍ ﺮﯾﻮﺼﺗ ،ﺩﺭﺍﺩ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﻭﺩ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

  #example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

ﺩﺮﮐ ﺺﺨﺸﻣ ﺩﺍﺮﻓﺍ ﺯﺍ ﮏﯾ ﺮﻫ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﻪﻧﺎﮔﺪﻨﭼ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻭﺎﺼﺗ

ﻪﺠﯿﺘﻧ ﻥﺎﻤﻫ) ﺪﻨﮐﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ background ﯽﺴﯾ

ﻝﺎﺜﻣ

  #example1 {
  background: url(img_flwr.gif) right bottom 
no-repeat, url(paper.gif) left top repeat;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﻩﺯﺍﺪﻧﺍ

.ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻭﺎﺼﺗ ﻩﺯﺍﺪﻧﺍ ﺪﻫﺩ ﯽﻣ ﻥﺎﮑﻣﺍ ﺎﻤﺷ ﻪﺑ

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

:ﺪﮐ ﻢﻫ ﻦﯾﺍ

ﻝﺎﺜﻣ

#div1
{
   
background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 1px solid black;
  background: url(img_flwr.gif);
  background-size: 100px 80px;
  background-repeat: no-repeat;
  padding: 15px;
}

#example2 {
  border: 1px solid black;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<p>Resized background-image:</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>Original size of the background-image:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

ﺯﺍ ﺪﻨﺗﺭﺎﺒﻋ background-size ﯼﺍﺮﺑ ﺮﮕﯾﺩ ﻦﮑﻤﻣ ﺭﺍﺪ

contain
cover

ﺪﻨﮐ ﯽﻣ ﮒﺭﺰﺑ ﻥﺎﮑﻣﺍ ﺪﺣ ﺎﺗ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ contain

ﺍﻮﺘﺤﻣ ﻪﯿﺣﺎﻧ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﺱﺎﯿﻘﻣ ﯼﺍ ﻪﻧﻮﮔ ﻪﺑ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ

`ﻝﺎﺜﻣ`

  #div1
{
    
background: url(img_flower.jpg);
    
background-size: contain;
  background-repeat: no-repeat;
}
#div2
{
    
background: url(img_flower.jpg);
    
background-size: cover;	background-repeat: no-repeat;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: contain;
}

.div2 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: cover;
}

.div3 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<h2>background-size: contain:</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>No background-size defined:</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<p>Original image:</p>
<img src="img_flwr.gif" alt="Flowers" width="224" height="162">

</body>
</html>

`ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺲﮑﻋ ﻦﯾﺪﻨﭼ ﻩﺯﺍﺪﻧﺍ`

.ﺩﺮﯾﺬﭘﯽﻣ ﻪﻨﯿﻣﺯﺲﭘ ﻩﺯﺍﺪﻧﺍ ﯼﺍﺮﺑ ﺍﺭ ﺭﺍﺪﻘﻣ ﻦﯾﺪﻨﭼ ﺰﯿﻧ

`ﻝﺎﺜﻣ`

  #example1 {
  background: url(img_tree.gif) left top 
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top 
repeat;
  background-size: 50px, 130px, auto;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
  background-size: 50px, 130px, auto;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

`ﻞﻣﺎﮐ ﻩﺯﺍﺪﻧﺍ ﺭﺩ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ`

ﺪﻫﺩ ﺶﺷﻮﭘ ﺍﺭ ﻥﺁ ﻞﮐ ﻪﮐ ﻢﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺖﯾﺎﺳ ﺏﻭ ﮏﯾ ﺭﺩ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﮏﯾ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﻥﻮﻨ

:ﺖﺳﺍ ﺮﯾﺯ ﺡﺮﺷ ﻪﺑ ﺕﺎﻣﺍﺰﻟﺍ

(ﺪﯿﻔﺳ ﯼﺎﻀﻓ ﻥﻭﺪﺑ) ﺪﯿﻨﮐ ﺮﭘ ﺮﯾﻮﺼﺗ ﺎﺑ ﺍﺭ ﻪﺤﻔﺻ ﻞﮐ
ﺯﺎﯿﻧ ﺕﺭﻮﺻ ﺭﺩ ﺮﯾﻮﺼﺗ ﺱﺎﯿﻘﻣ
ﻪﺤﻔﺻ ﻂﺳﻭ ﺮﯾﻮﺼﺗ
ﺪﯾﻮﺸﻧ ﻝﻭﺮﮑﺳﺍ ﯼﺎﻫﺭﺍﻮﻧ ﺩﺎﺠﯾﺍ ﺚﻋﺎﺑ

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ <html> ﺮﺼﻨﻋ ﺯﺍ .ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻥﺁ ﻡﺎﺠﻧﺍ ﻩﻮﺤﻧ ﺮﯾﺯ ﻝﺎﺜﻣ

`ﻝﺎﺜﻣ`

  html {
  background: url(img_man.jpg) no-repeat 
center fixed; 
  background-size: cover;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
html { 
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

body { 
  color: white; 
}
</style>
</head>
<body>

<h1>Full Page Background Image</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

`ﻥﺎﻣﺮﻬﻗ ﺮﯾﻮﺼﺗ`

.ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﺪﯿﻫﺍﻮﺧﯽﻣ ﻪﮐ ﯽﯾﺎﺟ ﺭﺩ ﺍﺭ ﻥﺁ ﻭ ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ (ﻦﺘﻣ ﺎﺑ ﮒﺭﺰﺑ ﺮﯾﻮﺼﺗ ﮏﯾ

`ﻝﺎﺜﻣ`

  .hero-image {
  background: url(img_man.jpg) no-repeat center; 
  
   background-size: cover;
  height: 500px;
  position: 
   relative;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
</style>
</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">I am John Doe</h1>
    <h3>And I'm a Photographer</h3>
    <button>Hire me</button>
  </div>
</div>

<p>Page content..</p>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>

</body>
</html>

`CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﯽﮔﮋﯾﻭ`

.ﺪﺷﺎﺑ ﺎﺠﮐ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ backgro

:ﺩﺮﯿﮔ ﯽﻣ ﺕﻭﺎﻔﺘﻣ ﺭﺍﺪﻘﻣ ﻪﺳ ﯽﮔﮋﯾﻭ ﻦﯾﺍ

border-box - ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ ﻪﯿﺷﺎﺣ ﯼﻻﺎﺑ ﭗﭼ ﺖﻤﺳ ﻪﺷﻮﮔ ﺯﺍ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ
padding-box - (ﺽﺮﻓ ﺶﯿﭘ) ﻪﺒﻟ ﯼﻻﺎﺑ ﭗﭼ ﺖﻤﺳ ﻪﺷﻮﮔ ﺯﺍ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ padding ﺩﻮﺷ ﯽﻣ
content-box - ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ ﺍﻮﺘﺤﻣ ﯼﻻﺎﺑ ﭗﭼ ﺖﻤﺳ ﻪﺷﻮﮔ ﺯﺍ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ

:ﺪﻫﺩﯽﻣ ﻥﺎﺸﻧ ﺍﺭ background-origin ﯽﮔﮋﯾﻭ ﺮ

`ﻝﺎﺜﻣ`

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
}

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

#example3 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>
</head>
<body>

<h1>The background-origin Property</h1>

<p>No background-origin (padding-box is default):</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

`ﭗﯿﻠﮐ ﻪﻨﯿﻣﺯﺲﭘ CSS ﯽﮔﮋﯾﻭ`

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﯽﺷﺎﻘﻧ ﻪﯿﺣﺎﻧ background

:ﺩﺮﯿﮔ ﯽﻣ ﺕﻭﺎﻔﺘﻣ ﺭﺍﺪﻘﻣ ﻪﺳ ﯽﮔﮋﯾﻭ ﻦﯾﺍ

border-box - (ﺶﯿﭘﺽﺮﻓ) ﺲﭘﯽﻣ ﯽﺷﺎﻘﻧ ﻪﯿﺷﺎﺣ ﯽﻧﻭﺮﯿﺑ ﻪﺒﻟ ﻪﺑ ﻪﻨﯿﻣﺯﺩﻮﺷ
padding-box - ﺖﺳﺍ ﻩﺪﺷ ﯽﺷﺎﻘﻧ ﮏﺘﺸﻟﺎﺑ ﯽﻧﻭﺮﯿﺑ ﻪﺒﻟ ﻪﺑ ﻪﻨﯿﻣﺯ ﺲﭘ
content-box - ﺲﭘﯽﻣ ﯽﺷﺎﻘﻧ ﺍﻮﺘﺤﻣ ﺭﺩﺎﮐ ﻥﻭﺭﺩ ﻪﻨﯿﻣﺯﺩﻮﺷ

:ﺪﻫﺩﯽﻣ ﻥﺎﺸﻧ ﺍﺭ background-clip ﯽﮔﮋﯾﻭ ﺮﯾﺯ

`ﻝﺎﺜﻣ`

  #example1
{
     border: 10px dotted black;
  
padding: 35px;
  background: yellow;
  
background-clip: content-box;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
}

#example2 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: padding-box;
}

#example3 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}
</style>
</head>
<body>

<h1>The background-clip Property</h1>

<p>No background-clip (border-box is default):</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

`CSS ﻪﺘﻓﺮﺸﯿﭘ ﻪﻨﯿﻣﺯ ﺲﭘ ﯼﺎﻫ ﯽﮔﮋﯾﻭ`

background: ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﻪﻨﯿﻣﺯ ﺲﭘ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ
background-clip: ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﯽﺷﺎﻘﻧ ﻪﯿﺣﺎﻧ
background-image: ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﺮﺑ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﺪﻨﭼ ﺎﯾ ﮏﯾ
background-origin: ﺪﻧﺮﯿﮔﯽﻣ ﺭﺍﺮﻗ ﺎﺠﮐ ﺭﺩ ﻪﻨﯿﻣﺯﺲﭘ (ﯼﺎﻫ)ﺮﯾﻮﺼﺗ ﻪﮐ ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ
background-size: ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ (ﯼﺎﻫ)ﺮﯾﻮﺼﺗ ﻩﺯﺍﺪﻧﺍ


  
    
      ← صفحه قبلی
    
    
      صفحه بعد →