‎‎تصوير پس زمينهHTML Background Images -‎

Previous >    <Next  

‎‎تصوير پس زمينه براي بيشتر عناصرHTML را ميتوان تعريف نمود.

‎‎تصوير پس زمينه براي يك عنصرBackground Image on a HTML element -‎

‎براي اضافه نمودن تصوير پس زمينه براي يك عنصر از ويژگيCSS ‎background-‎image‎ ‎استفاده ميشود. ‎اين ويژگي در‎style‎ معرفي ميشود .

‎‎مثال ـ افزودن تصوير پس زمينه براي يك عنصر

‎ 
<p style="background-image: url('img_girl.jpg');">

--(go to editor for change code and run)

‎ميتوان تصوير پس زمينه را در‎<style>‎ در بخش ‎<head>‎ مشخص ‎نمود.

‎‎مثال ـ مشخص كردن تصويرپس زمينه در‎<style>‎

‎ 
<style>
p {
  background-image: url('img_girl.jpg');
}
</style>

--(go to editor for change code and run)

‎‎تصويرپس زمينه در صفحهBackground Image on a Page -‎

‎اگر براي كل صفحه وب تصوير پس زمينه بخواهيد، بايد آنرا در بخش‎<body>‎ معرفي ‎نمائيد.

‎‎مثال ـ تصوير پس زمينه براي صفحه

‎ 
<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

--(go to editor for change code and run)

‎‎تكرار تصوير پس زمينهBackground Repeat -‎

‎اگر تصوير كوچكتر از فضاي عنصر باشد، تصوير بصورت افقي وعمودي تكرار ميشود تا فضاي عنصر ‎را بپوشاند، مگر اينكه از تكرار تصوير جلوگيري شود.

‎‎مثال ـ تكرار تصوير در فضاي عنصر

‎ 
<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

--(go to editor for change code and run)

‎براي جلوگيري از تكرار تصوير در پس زمينه بايد از‎backgroun-‎repeat‎ استفاده شود ‎مقدار آن‎norepat‎ اعلام شود .

‎‎مثال ـ عدم تكرار تصوير در پس زمينه

‎ 
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

--(go to editor for change code and run)

‎‎پوشش پس زمينهBackqround Cover -‎

‎اگر بخواهيم تصوير تمام فضاي عنصر را بدون تكرار بپوشاند، بايد از background-size ‎استفاده شود ومقدار آن‎cover;‎ برقرار شود.

‎،علاوه برآن ،براي اينكه اطمينان داشته كه هميشه پوشش كاملست ‎background_attachment‎‎ ‎بايد با مفدار‎fixed;‎ تنظيم شود.

‎‎بدين تريب بدون كشش با رعايت نسبت هاي تصوير فضاي عنصر را پوشش ميدهد.

‎‎مثال ـ پوشش كامل تصوير در فضاي عنصر

‎ 
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>

--(go to editor for change code and run)

‎‎كشش پس زمينهBackground Stretch -‎

‎اگر ميخواهيد تصويربا كشش پس زمينه را كاملا پوشش دهد، بايد‎background-‎size‎ به ‎ 100% 100%‎‎ ‎‎تنظيم شود.

‎‎مثال ـ پوشش كامل با كشش

‎ 
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}
</style>

--(go to editor for change code and run)

‎‎بيشتر بياموزيدLeran More CSS -‎

‎در مثال هاي فوق ملاحظه نموديد، كه جگونه از امكاناتCSS style براي پوشش پس زمينه استفاده ‎شد ، براي اطلاعات بيشر بخشCSS background properties را مطالعه فرمائيد.

Previous >    <Next