شما ميتوانيد يک آدرس اينترنتي براي عکس خود قرار دهيد يا از داخل کامپيوتر خود يک عکس را فراخواني کنيد.
براي درک بهتر ميتوانيد از مثال زير استفاده کنيد.
<span style="background-image: url('http://www.iraniantejarat.net/images/ecommerce/styles_new/201307/web_minithumb/100881_J8540_9066_001_web_minithumb.jpg')">براي اين span از تصوير زمينه استفاده شده است.</span>
براي اين span از تصوير زمينه استفاده شده است.
از ويژگي بالا تقريبا مي توان براي تمامي اجزاي صفحه استفاده کرد
در مثال پايين مي خواهيم يک عکس را در background صفحه فراخواني کنيم براي درک بهتر به مثال زير توجه کنيد
background-image: url(‘/ _______ ‘)
background-repeat:no-repeat;
no-repeat
از تکرار آن در صفحه جلوگيري ميکند background-repeat:no-repeat; ويژگي
شما مي توانيد بجاي مقدار no-repeat از مقدارهايي که در جداول پايين نوشته شده استفاده کنيد
همانطور که ملاحظه کرديد با استفاده از طراحی وب سایت استايل قدرت کنترل بيشتري بر روي background داريم چه اين تصوير زمينه براي قسمتي خاص باشد و چه براي همه ي صفحه استفاده شود با استفاده از جدول پايين مي توانيد از تمامي ويژگي هايي که مي توان از آن ها در کنترل تصويرهاي زمينه استفاده کرد بهره جست
background-repeat
repeat: با استفاده از اين مقدار مشخص مي کنيم که اگر تصوير زمينه از اندازه ي پنجره کوچکتر بود چه به صورت افقي و چه به صورت عمودي تکرار شود تا
تمام صفحه را پوشش دهد
repeat-x: بااستفاده از اين گزينه تصوير را در راستاي افقي صفحه تکرار مي کنيم
repeat-y: بااستفاده از اين گزينه تصوير را در راستاي عمودي صفحه تکرار مي کنيم
no-repeat:اين گزينه مشخص مي کند که تصوير زمينه نبايد در هيچ جهتي تکرار شود
براي درک بهتر به مثال زير توجه کنيد .در اين مثال مي خواهيم يک عکس را در محور x تکرار کنيم
در اين مثال از css در head صفحه استفاده مي کنيم اما شما مي توانيد از تمامي مدل هاي استايل دهي استفاده کنيد
<html>
<head>
<style type="text/css">
body
{
background-image: url('/iraniantejarat.net/backgroundimage.html');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1> hi dad</h1>
</body>
</html>
background-attachment
از اين ويژگي زماني استفاده مي شود که شما از اسکرول بار صفحه استفاده مي کنيد و مي توانيد background را به صورت ثابت و يا متحرک همراه با اسکرول خوردن صفحه تنظيم کنيد از دو مقدار زير مي توان براي اين ويژگي استفاده کرد که به شرح زير مي باشد
fixed: با انتخاب اين گزينه تصوير زمينه در زمان اسکرول خورد سايت ثابت مي ماند
scroll: با استفاده از اين گزينه تصوير زمينه به همراه محتويات صفحه اسکرول مي خورد
براي درک بهتر به مثال زير توجه کنيد, در اين مثال طراحی وب سایت يک عکس به عنوان پس زمينه در نظرگرفته شده است
<style type="text/css">
<!--
body {
background-image:green url('2.jpg');
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center
}
-->
</style>
background-position
background-position- top right : توسط اين مقدار تصوير شما در بالا و سمت راست صفحه قرار خواهد گرفت
background-position-bottom right : توسط اين مقدار تصوير شما در پايين و سمت راست صفحه قرار خواهد گرفت
background-position-right center : توسط اين مقدار تصوير شما در سمت راست و ميانه صفحه قرار خواهد گرفت
براي درک بهتر به مثال هاي زير توجه کنيد
روش ?
<style type=”text/css”>
<!–
body {
background-image:green url(’2.jpg’);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top right
}
طراحی وب سایت