میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

پس زمینه (Backgrounds) در CSS

برای تغییر رنگ و تصویر پس زمینه (Backgrounds) در CSS خصوصیات مربوط به پس زمینه (Backgrounds) برای یک عنصر استفاده می شود.

این خصوصیات عبارتند از:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position
  6. background-attachment
  7. background (کوتاه شده)

 


رنگ پس زمینه background-color

خصوصیت background-color رنگ پس زمینه یک عنصر را مشخص می کند.

در مثال زیر رنگ پس زمینه در گزینشگر body تنظیم شده است:

 

body {
  background-color: lightblue;
}

در CSS رنگ به یکی از روش های زیر مشخص می شود:

  • name: نام رنگ باید مشخص شود مانند “red”
  • RGB: به صورت RGB مشخص می شود مانند “(rgb(255,0,0”
  • Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

در مثال زیر رنگ های پس زمینه مختلف برای عناصر h1 و p و div تنظیم شده است:

 

h1 {
    background-color:#6495ed;
}
p {
    background-color:#e0ffff;
}
div {
    background-color:#b0c4de;
}

 


نمایش یک عکس در پس زمینه background-image

خصوصیت background-image یک عکس را به عنوان پس زمینه برای یک عنصر مشخص می کند.

به صورت پیش فرض عکس در محور X و Y تکرار می شود و تمام پس زمینه عنصر مورد نظر را می پوشاند.

در مثال زیر یک عکس به عنوان پس زمینه تنظیم شده است:

 

body {
  background-image: url("paper.gif");
}
توجه: هنگام استفاده از تصویر پس زمینه ، از تصویری استفاده کنید که خوانایی متن حفظ شود.
تصویر پس زمینه همچنین می تواند برای عناصر خاص تنظیم شود ، مانند تگ <p>:

 

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

 


background-repeat تکرار عکس در محور X و Y

اگر تکرار عکس تنظیم نشود، به صورت پیشفرض عکس مورد نظر در دو محور X و Y تکرار خواهد شد.

بعضی مواقع یک عکس باید فقط در محور X و یا فقط در محور Y تکرار شود، در مثال زیر عکس به طور پیشفرض در دو محور X و Y تکرار شده است:

 

body {
  background-image: url("gradient_bg.png");
}
 اگر بخواهیم عکس پس زمینه مثال قبل فقط در محور x تکرار شود مانند زیر عمل خواهیم کرد .
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

تنظیم مکان عکس پس زمینه

توجه: زمانی که از عکس پس زمینه استفاده می کنید، توجه داشته باشید که عکس مورد نظر باعث ناخوانایی متن نشود.

در مثال زیر با تنظیم خصوصیت background-repeat با مقدار “no-repeat” عکس پس زمینه فقط یکبار نمایش داده می شود.

 

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

 


تنظیم مکان عکس پس زمینه background-position

اگر عکس پس زمینه در یک مکان قرار گرفته و باعث ناخوانایی متن شود بهتر است مکان عکس را عوض کنیم

مکان عکس پس زمینه یک عنصر، با خصوصیت background-position مشخص می شود

 

 

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

 


background-attachment

با استفاده از ویژگی background-attachment در CSS می توان نحوه نمایش / پیوست تصویر زمینه را در یک صفحه وب مشخص کرد.

با استفاده از خصوصیت background-attachment می توانید تنظیم نمایید که، اگر صفحه Scroll داشت و به سمت پایین یا بالا حرکت کردیم آیا عکس پس زمینه در جای خود ثابت بماند یا خیر.

مشخص کنید که تصویر پس زمینه باید ثابت باشد:

 

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

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

 

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

 

 


مختصر نویسی  background

همانطور که در مثال های بالا مشاهده کردید، برای تنظیم پس زمینه، با خصوصیات زیادی سروکار داریم.

برای کوتاه تر شدن کد، این امکان وجود دارد که همه خصوصیات مربوط به پس زمینه را در یک خصوصیت مشخص کنیم، این کار به اصطلاح مختصر نویسی نامیده می شود.

در CSS از خصوصیت “background” برای مختصر نویسی پس زمینه استفاده می شود

به مثال زیر نگاه کنید

 

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

می توان با شیوه کوتاه نویسی به صورت زیر نوشت

 

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

 

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

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

اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

 

خصوصیتتوضیحات
backgroundکلیه خصوصیات مربوط به پس زمینه را در یک مرحله تنظیم می کند.
background-attachmentمکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه
background-colorرنگ پس زمینه یک عنصر را تنظیم می کند.
background-imageعکس پس زمینه یک عنصر را تنظیم می کند
background-positionمکان عکس پس زمینه یک عنصر را تنظیم می کند
background-repeatچگونگی تکرار عکس پس زمینه یک عنصر را تنظیم می کند

 


امیدواریم آموزش پس زمینه (Backgrounds) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
backgrounds cssBackgrounds در CSScssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش پس زمینه در cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfپس زمینه (Backgrounds) در CSSپس زمینه در CSSتصویر پس زمینه در cssتغییر رنگ پس زمینه در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهرنگ پس زمینه در cssساختار دستورات CSSسی اس اسفارسی w3schoolsقرار دادن عکس پس زمینه در cssکتاب آموزش css فارسیکد رنگ پس زمینه در css
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟