کار با تصویر زمینه در طراحی صفحات با استایل

ما با استفاده از شناسه background در تگ BODY می توانستیم برای صفحه تصویر زمینه مشخص کنیم. اما با استفاده از استایل می توانیم کنترل بیشتری بر این تصویر زمینه داشته باشیم چه این تصویر زمینه برای کل صفحه استفاده شود چه برای قسمت مشخصی از صفحه. برای مثال می توانیم تصویر زمینه را به گونه ای تعریف کنیم که تکرار نشود، ثابت باشد، یا برای آن نقطه شروع تعیین کنیم. برخی از این خواص را می توانید در جدول زیر ملاحظه کنید:

توضیحات مقادیر قابل استفاده ویژگی
مشخص کننده محل قرار گرفتن تصویر در اینترنت است آدرس محل قرار گرفتن تصویر background-image: url(url)
نوع تکرار تصویر را مشخص می کند repeat, no-repeat, repeat-x, repeat-y background-repeat: مقدار ویژگی
مشخص می کند که آیا تصویر زمینه با اسکرول کردن صفحه حرکت می کند یا در جای خود ثابت می ماند scroll, fixed background-attachment: مقدار ویژگی
موقعیت تصویر زمینه در صفحه را مشخص می کند مقدار اول:
top, center, bottom,
عددی در مقیاس پیکسل، عددی در مقیاس درصد
مقدار دوم:
left, center, right,
عددی در مقیاس پیکسل، عددی در مقیاس درصد
background-position: مقدار دوم مقدار اول

برای استفاده از این ویژگیها و کاربرد آنها برای تگ BODY می توانید یک استایل در قسمت HEAD متن تعریف کنید یا از استایل خارجی استفاده کنید. مثلاً برای تصویر زمینه صفحات سایت ما می توان در قسمت HEAD متن یک استایل به صورت زیر تعریف کرد:

<style type="text/css">
<!--
body {
background-image:url(http://www.neopersia.org/images/index.jpg);
background-repeat:repeat-y }
-->
</style>

در این صورت تصویر زمینه ای مشابه سایت ما خواهید داشت. می توانید آنرا امتحان کنید.

 


background-repeat

همانطور که در درس قبل ملاحظه کردید در مورد background-image توضیحاتی داده شد. در اینجا به سایر ویژگیهای مربوط به تصویر زمینه می پردازیم.

این ویژگی تعیین کننده نوع تکرار شدن تصویر زمینه است. در اینجا مقادیری را که می توان به این ویژگی اختصاص داد بیان می کنیم:

  • repeat
    این مقدار تعیین می کند که تصویر زمینه در صورتی که از اندازه پنجره کوچکتر بود هم به صورت افقی و هم عمودی تکرار شود تا همه زمینه پنجره را بپوشاند.
  • no-repeat
    این گزینه مشخص می کند که تصویر زمینه نباید تکرار شود حتی اگر از اندازه پنجره کوچکتر بود.
  • repeat-x
    این گزینه مشخص می کند که تصویر باید به صورت افقی تکرار شود نه عمودی.
  • repeat-y
    این گزینه مشخص می کند که تصویر زمینه باید به صورت عمودی تکرار شود.

background-attachment

از این ویژگی برای تعیین موقعیت تصویر زمینه در هنگام بالا و پایین بردن صفحه به وسیله اسکرول بار در پنجره مرورگر است. مقادیر زیر را می توان برای این ویژگی استفاده کرد:

  • scroll
    اگر این گزینه را انتخاب کنید تصویر زمینه به همراه محتویات صفحه به بالا و پایین می رود.
  • fixed
    با انتخاب این گزینه مشخص می کنید که تصویر زمینه در هنگام حرکت کردن محتویات صفحه باید ثابت بماند و حرکت نکند.
    کد زیر را می توان برای مشخص کردن تصویر زمینه ثابت در بخش HEAD متن استفاده کرد. در این مثال لوگوی سایت ما به عنوان زمینه ثابت در نظر گرفته شده است. برای مشاهده یک نمونه از این تصویر زمینه اینجا را کلیک کنید.
<style type="text/css">
<!--
body {
background-image:url(http://www.neopersia.org/images/cssBGtest.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center }
-->
</style>

این مثال را به یاد داشته باشید. دوباره از آن استفاده خواهیم کرد. در درس بعدی به سایر ویژگیهای مرتبط با تصویر زمینه می پردازیم.


نظرات بازدید کنندگان
Wed, 06 May 2009 19:52:52 +0430 نویسنده : مژده
سلام خسته نباشيد
آيا مي توان اندازه back ground  را تغيير داد مثلا عكس ما سايزش خيلي كوچك است و اگر بخواهيم كل صفحه را پوشش دهد ده ها عدد از اين عكس را كنار هم به صورت افقي و عمودي قرار مي دهد no repeat را نمي خواهم مثلا بگوييم سايز عكس زمينه باطول و عرض اندازه windowsو كل صفحه مرورگرمان باشد width,height
آيا امكانش است؟
 
Tue, 17 Feb 2009 11:06:59 +0330 نویسنده : rahim
با سلام
تبريك مي گم بهتون ابتكار جالبيه
مي خوام اگه امكانش هست مراحل طراحي سايت و برام ميل كنين 1 دنيا ممنون
من تازه كتاب xhtml تموم كردم و هنوز مبتدي هستم ولي در همين اول كار به مشكل خوردم وقتي مقدار دقيق عكس و متن با استايل تعيين مي كنم با كوچيك كردن پنجره روي هم قرار مي گيرن بايد چه كار كنم البته با اين دستور
{position:absolute;..............}
 
Sat, 10 Jan 2009 11:29:07 +0330 نویسنده : فاطمه
با سلام ضمن تشکر از سایت بسیار خوبتان لطفا در مورد قرار دادن تصویر موجود در هارد دیسک در در صفحات وب توضیح دهید.
 
Sat, 10 Jan 2009 11:29:04 +0330 نویسنده : فاطمه
با سلام ضمن تشکر از سایت بسیار خوبتان لطفا در مورد قرار دادن تصویر موجود در هارد دیسک در در صفحات وب توضیح دهید.
 
Mon, 19 May 2008 13:22:44 +0430 نویسنده : هاله
سایت خوبیه لذت بردم
 
ساعت: 01:41 - تاریخ: 17 مهر 1386 نویسنده : ميترا
خيلي خوشگله سايتتون ومفيده مرسي