آموزش CSS (قسمت ۱۵ : تنظیم تکرار تصویر زمینه) | خدمات کامپیوتری امداد133
خانه / کامپیوتر / اموزش / آموزش CSS (قسمت ۱۵ : تنظیم تکرار تصویر زمینه)

آموزش CSS (قسمت ۱۵ : تنظیم تکرار تصویر زمینه)

ما با استفاده از شناسه 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 متن یک استایل به صورت زیر تعریف کرد :

 


 

background-repeat :

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

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

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

 


 

 

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

  • scroll : اگر این گزینه را انتخاب کنید تصویر زمینه به همراه محتویات صفحه به بالا و پایین می رود.
  • fixed : با انتخاب این گزینه مشخص می کنید که تصویر زمینه در هنگام حرکت کردن محتویات صفحه باید ثابت بماند و حرکت نکند.
    کد زیر را می توان برای مشخص کردن تصویر زمینه ثابت در بخش HEAD متن استفاده کرد.

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

درباره ی nasimazadi

مطلب پیشنهادی

واحد پردازش مركزي CPU 

واحد پردازش مركزي CPU مدت زمان انجام يك كار بوسيله كامپيوتر، به عوامل متعددي بستگي …

پاسخ دهید