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

تبلیغات
کانال تلگرام فتولیا

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

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

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

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

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

 


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

Background Color

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

body {
    background-color: #b0c4de;
}

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

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

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

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

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

Background Image

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

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

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

body {
    background-image: url("paper.gif");
}

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

Background Repeat

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

در همین رابطه :   فرم ثبت نام حرفه ای با PHP/jQuery به صورت AJAX

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

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

 

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

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

‌Background Position

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

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

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

‌Backgroud Attachment

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

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

body { 
    background-image: url('w3css.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

 

 

2 Comments

پاسخ دهید

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

More in PHP, طراحي وب
چگونه در PHP نوع Array را به Object و نوع Object را به Array تبدیل کنیم؟

در زبان برنامه نویسی php دو نوع داده خیلی مهم بنام اشیا (objects) و آرایه ها(Arrays) داریم . در بعضی...

Close