آموزش کار با پس زمینه ها یا Backgrounds در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با پس زمینه ها یا Backgrounds در CSS با من همراه باشید.
Free-Learn
در این جلسه میخوانیم
کار با پس زمینه ها یا Backgrounds در CSS
در این بخش / جلسه از سری آموزش های قدم به قدم زبان CSS میخواهیم با پس زمینه ها یا Backgrounds در CSS کار کنیم ، در واقع از این ویژگی برای ایجاد پس زمینه ( تصویر یا رنگ ) برای یک عنصر استفاده می شود.
ویژگی Background دارای حالت های مختلفی می باشد که این حالت به شرح زیر می باشد :
- background-color : برای تنظیم رنگ پس زمینه
- background-image : برای تنظیم تصویر پس زمینه
- background-repeat : برای تکرار کردن تصویر پس زمینه
- background-attachment : برای تنظیم نحوه قرار گیری تصویر پس زمینه
- background-position : برای تنظیم موقعیت قرار گیری تصویر پس زمینه
Free-Learn
ویژگی background-color در CSS
در این روش ما میتونیم یک رنگ را برای پس زمینه یک عنصر تنظیم نماییم. مبحث قبلی در مورد رنگ ها در CSS بود و یاد گرفتیم که از چه روش هایی میشه یک رنگ را برای یک عنصر یا چند عنصر انتخاب و تنظیم نماییم.
شکل کلی برای تعریف یک رنگ برای پس زمینه در CSS بصورت زیر می باشد :
|
1 |
background-color: color_value ; |
مثال :
|
1 2 3 4 5 |
<style> body{ background-color:#5db616; } </style> |
Free-Learn
ویژگی background-image در CSS
با استفاده از این ویژگی میتوانیم برای عنصر مان یک تصویر پس زمینه ایجاد و یا انتخاب نماییم، که شکل کلی این ویژگی بصورت زیر می باشد :
|
1 |
background-image: url("Image_Name"); |
مثال :
|
1 2 3 4 5 6 7 |
<style> body{ background-image:url("images/bg-1.jpg"); } </style> |
Free-Learn
ویژگی background-repeat در CSS
با استفاده از این ویژگی میتوانیم مشخص کنیم که آیا تصویر پس زمینه مان تکرار شود یا خیر! این تکرار یعنی اینکه تصویر در حالت پیش فرض بصورت افقی یا عمودی کاشی وار تکرار می شود.
یک تصویر بصورت پیش فرض دارای تکرار می باشد.
مثال شماره ۱ : تصویر بصورت پیشفرض دارای تکرار هم بصورت افقی و هم عمودی می باشد
|
1 2 3 4 5 6 7 |
<style> body{ background-image:url("images/bg-1.jpg"); } </style> |
مثال شماره ۲ : بدون تکرار
|
1 2 3 4 5 6 7 8 |
<style> body{ background-image:url("images/bg-1.jpg"); background-repeat:no-repeat; } </style> |
مثال شماره ۳ : تکرار بصورت فقط افقی
|
1 2 3 4 5 6 7 8 |
<style> body{ background-image:url("images/bg-1.jpg"); background-repeat:repeat-x; } </style> |
مثال شماره ۴ : تکرار فقط بصورت عمودی
|
1 2 3 4 5 6 7 8 |
<style> body{ background-image:url("images/bg-1.jpg"); background-repeat:repeat-y; } </style> |
Free-Learn
ویژگی background-attachment در CSS
با استفاده از این ویژگی میتوان نحوه قرار گیری تصویر پس زمینه را مشخص کرد، اینکه مثلا تصویر بصورت ثابت باشد یا بفرض مثال با اسکرول کردن ماوس تصویر هم جابه جا شود.
نمونه : در حالت فیکس (Fixed) ثابت
سلام خوبی؟
مثال :
|
1 2 3 4 5 6 7 8 9 10 |
<style> body{ background-image:url("images/bg-1.jpg"); background-repeat:repeat; background-attachment:fixed; color:#fff; } </style> |
مثال شماره ۲ : در حالت اسکرول (یعنی با اسکرول کردن تصویر هم جابه جا میشه)
|
1 2 3 4 5 6 7 8 9 10 |
<style> body{ background-image:url("images/bg-1.jpg"); background-repeat:repeat; background-attachment:scroll; color:#fff; } </style> |
Free-Learn
ویژگی background-position در CSS
با استفاده از این ویژگی نیز میتوان موقعیت قرار گیری تصویر پس زمینه را مشخص کرد.
مثال :
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> body{ background-image:url("bg-1.jpg"); background-repeat:no-repeat; background-attachment:fixed; background-position:center; color:#fff; } </style> |
