CSS

آموزش قرار دادن تصویر پس زمینه در CSS

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

مقالات این سری آموزشی :

  1. آشنایی با CSS و شروع کار با آن
  2. آموزش انتخابگر ها (Selectors) در CSS
  3. روش های اضافه کردن CSS به سایت
  4. آموزش قرار دادن تصویر پس زمینه در CSS

خاصیت background در css برای اعمال پس زمینه به عناصر صفحه بکار می رود

خاصیت هایی که در CSS برای کار با پس زمینه استفاده می شوند ُ‌عبارتند از :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 


در ادامه تک تک موارد بالا را توضیح می دهیم

Background Color

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

در CSS رنگ را اغلب به سه روش تعیین می کنند :

  • یک مقدار HEX مثل “#ff0000
  • یک مقدار RGB مثل “rgb(255,0,0)
  • اسم رنگ مثل “red

لیست کامل مقادیری که برای رنگ قابل اعمال است می توانید از اینجا ببینید.

در مثال زیر به همه تگ های <h1> , <p> و <div> رنگ های مختلفی اعمال می شود

Background Image

این خاصیت می تواند یک عکس را به عنوان پس زمینه یک عنصر قرار دهد .

به صورت پیش فرض تصویر را از گوشه بالا سمت چپ تکرار می کند تا زمینه  کل عنصر را با آن پر کند .

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

بالا یه عکس به نام paper.gif رو داده به عنوان پشت زمینه کل صفحه.

Background Repeat

با این خاصیت می توان تعیین کرد که تصویر پس زمینه در چه جهتی تکرار شود . افقی – عمودی , فقط افقی و یا فقط عمودی و یا اصلا تکرار نشود .

به عنوان مثال برای تکرار یک تصویر فقط در افقی از کد زیر باید استفاده کرد :

 

اگر بخواهید تصویر اصلا تکرار نشود از کد زیر بایستی استفاده کنید :

‌Background Position

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

در این مثال گفتیم که موقعیت تصویر در گوشه بالا سمت راست باشد .

‌Backgroud Attachment

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

به صورت پیش فرض تصویر ثابت نیست و حرکت می کند . برای تثبیت آن باید از کد زیر استفاده کنید :

 

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *