آموزش پس زمینه در CSS به زبان ساده با مثال کاربردی

از ویژگی های background در CSS برای تعریف سبک های پس زمینه در عناصر استفاده می شود.

ویژگی های background

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

رنگ پس زمینه

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

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

body {
background-color: #f0e68c;
}

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

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

تصویر پس زمینه

ویژگی background-image ، یک تصویر را به عنوان پس زمینه یک عنصر HTML تنظیم می کند.

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

مثال

body {
background-image: url(“leaf.jpg”);
}

تکرار پس زمینه

ویژگی background-image  به طور پیش فرض، یک تصویر را به صورت افقی و عمودی تکرار می کند.

با استفاده از ویژگیbackground-repeat  می توانید شیوه تکرار تصویر پس زمینه را در پس زمینه یک عنصر html کنترل کنید. می توانید یک تصویر پس زمینه را به صورت عمودی (محور y)، افقی (محور x)، در هر دو جهت یا در هیچ جهت تکرار کنید.

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

body {
background-image: url(“gradient.png”);
background-repeat: repeat-x;
}

اتصال پس زمینه

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

مثال

body {
width: 250px;
height: 200px;
overflow: scroll;
background-image: url(“recycle.jpg”);
background-attachment: fixed;
}
ز

موقعیت پس زمینه

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

اگر برای این ویژگی هیچ مقداری مشخص نشده باشد، به صورت پیش فرض تصویر در موقعیت سمت بالا-چپ عنصر یعنی در نقطه (۰,۰) قرار می گیرد. مثال زیر را مشاهده کنید:

body {
background-image: url(“tree.png”);
background-repeat: no-repeat;
}

در مثال زیر، تصویر پس زمینه در گوشه بالا-راست قرار گرفته و موقعیت تصویر توسط ویژگی background-position مشخص می شود.

body {
background-image: url(“tree.png”);
background-repeat: no-repeat;
background-position: 100% top;
}

ویژگی کوتاه شده Background

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

ویژگی Background یک ویژگی مختصر برای تنظیم همه ویژگی های پس زمینه واحد خاص به طور همزمان است. برای مثال:

body {
background-color: #f0e68c;
background-image: url(“smiley.png”);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 250px 25px;
}

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

body {
background: #f0e68c url(“smiley.png”) no-repeat fixed 250px 25px;
}

هنگام استفاده از ویژگی کوتاه شده background  ترتیب مقادیر پس زمینه به صورت زیر باید باشد.

background: color image repeat attachment position;

اگر هنگام استفاده از ویژگیbackground  یک مقدار فراموش شود و یا مشخص نشده باشد، از مقدار پیش فرض آن ویژگی، در صورت وجود، استفاده می شود.

توجه: ویژگی های پس زمینه ارثی نیست، اما به طور پیش فرض، مقدار اولیه برای ویژگی پس زمینه در CSS، transparent تنظیم شده است، به همین دلیل پس زمینه عنصر والد نمایش داده می شود.