آموزش گام به گام CSS 2.0 بخش دوازده

 

background-image :
 
این خاصیت تعریف کننده عکس زمینه برای عنصر مورد نظر یا صفحه است. بصورت پیشفرض عکس ضمینه تکرار شونده است وکل سطح پشت عنصر مورد نظر را پوشش میدهد.
برای تعریف عکس زمینه صفحه بصورت زیرعمل میکنیم:

Code:
<..!DOCTYPE html>
<..html>
<..head>
<..style>
body {background-image:url('paper.gif');}
<../style>
<../head>
<..body>
<..h1>Hello World!<../h1>
<../body>
<../html>

 


برای تعیین نوع تکرار یا عدم تکرار عکس پشت زمینه از دستور background-repeat بصورت زیر استفاده میکنیم: که دارای مقادیر repeat-x,repeat-y,no-repeat میباشد.

Code:
<..!DOCTYPE html>
<..html>
<..head>
<..style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
<../style>
<../head>
<..body>
<..h1>Hello World!<../h1>
<../body>
<../html>


برای موقعیت دهی عکس پشت زمینه بمکان دلخواه از دستور background-position بصورت زیر استفاده میشود:

Code:

<..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>

background no-repeat, set position example.<../p> <..p>Now the background image is only shown once, and positioned away from the text.

<..p>In this example we have also added a margin on the right side, so the background image will never disturb the text.<../p> <../body> <../html>