CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﺭﺍﺮﮑﺗ

فهرست مطالب

CSS ﺭﺍﺮﮑﺗ-ﻪﻨﯿﻣﺯ ﺲﭘ

.ﺪﻨﮐ ﯽﻣ ﺭﺍﺮﮑﺗ ﯼﺩﻮﻤﻋ ﻭ ﯽﻘﻓﺍ ﺕﺭﻮﺻ ﻪﺑ ﺍﺭ ﺮﯾﻮﺼﺗ ﮏﯾ backg

:ﻦﯾﺍ ﺪﻨﻧﺎﻣ ،ﺪﻨﺳﺭ ﯽﻣ ﺮﻈﻧ ﻪﺑ ﺐﯿﺠﻋ ﺕﺭﻮﺻ ﻦﯾﺍ ﺮﯿﻏ ﺭﺩ ،ﺪﻧﻮﺷ ﺭﺍﺮﮑﺗ ﯼﺩﻮﻤﻋ ﺎﯾ ﯽﻘﻓﺍ ﺕﺭﻮﺻ

`ﻝﺎﺜﻣ`

body
{
  background-image: url("gradient_bg.png");
}

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("gradient_bg.png");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Strange background image...</p>

</body>
</html>

.ﺪﺳﺭ ﯽﻣ ﺮﻈﻧ ﻪﺑ ﻪﻨﯿﻣﺯ ﺲﭘ ،(background-repeat: repeat-

`ﻝﺎﺜﻣ`

body
{
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

ﻪﺘﮑﻧ: ﯼﺩﻮﻤﻋ ﺕﺭﻮﺻ ﻪﺑ ﺮﯾﻮﺼﺗ ﮏﯾ ﺭﺍﺮﮑﺗ ﯼﺍﺮﺑ، back

`ﺭﺍﺮﮑﺗ ﻥﻭﺪﺑ :CSS-repeat ﻪﻨﯿﻣﺯ ﺲﭘ`

:ﺩﻮﺷﯽﻣ ﺺﺨﺸﻣ background-repeat ﯽﮔﮋﯾﻭ ﻂﺳﻮﺗ

`ﻝﺎﺜﻣ`

:ﺪﯿﻫﺩ ﻥﺎﺸﻧ ﺭﺎﺑ ﮏﯾ ﻂﻘﻓ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ

body
{
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image only shows once, but it is disturbing the reader!</p>

</body>
</html>

ﺪﻨﮐ ﯽﻤﻧ ﺍﺭ ﺭﺎﮐ ﻦﯾﺍ ﻪﮐ ﯼﺭﻮﻃ ﻪﺑ ،ﻢﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﺮﯾﻮﺼﺗ ﺖﯿﻌﻗﻮﻣ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﺎﻣ .ﺖﺳﺍ ﻩﺪ

`CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﺖﯿﻌﻗﻮﻣ`

ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ background-position ﯽﮔﮋﯾﻭ ﺯﺍ

`ﻝﺎﺜﻣ`

:ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﻻﺎﺑ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﺷﻮﮔ ﺭﺩ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ

body
{
   
background-image: url("img_tree.png");
   
background-repeat: no-repeat;
   
background-position: right top;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, the background image is only shown once. In addition it is positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>

</body>
</html>

`CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﺖﯿﻌﻗﻮﻣ ﻭ ﺭﺍﺮﮑﺗ ﯼﺎﻫ ﯽﮔﮋﯾﻭ`

background-position: ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﮏﯾ ﻉﻭﺮﺷ ﺖﯿﻌﻗﻮﻣ
background-repeat: ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﮏﯾ ﺭﺍﺮﮑﺗ ﻩﻮﺤﻧ


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