آموزش پس زمینه در 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 تنظیم شده است، به همین دلیل پس زمینه عنصر والد نمایش داده می شود.

نکات کمتر گفته شده درباره پس‌زمینه در CSS

• ترتیب دقیق مقادیر در ویژگی مختصرنویسی (background): هنگام استفاده از دستور shorthand برای پس‌زمینه، اگرچه الزامی به نوشتن تک‌تک مقادیر نیست، اما رعایت ترتیب استاندارد اهمیت دارد. ترتیب صحیح مقادیر به صورت زیر است: background: [color] [image] [repeat] [attachment] [position]; نکته ظریف اینجاست که مقادیر مربوط به موقعیت (background-position) اگر با اندازه‌گیری همراه شوند، حتماً باید بعد از اندازه یا مقادیر دیگر قرار گیرند تا مرورگر آن‌ها را به درستی تفسیر کند.

• مدیریت همزمان چند تصویر پس‌زمینه (Multiple Backgrounds): شما محدود به استفاده از یک تصویر نیستید! در CSS مدرن می‌توانید با استفاده از کاما (,) چندین تصویر پس‌زمینه را به یک عنصر اختصاص دهید. در این حالت، عکسی که اول نوشته می‌شود در بالاترین لایه (روی بقیه) قرار می‌گیرد: background: url('top-image.png'), url('bottom-image.jpg');

• نحوه عملکرد ارث‌بری (Inheritance) و مقدار پیش‌فرض transparent: ویژگی‌های پس‌زمینه به صورت پیش‌فرض ارث‌بری (Inherit) نمی‌شوند؛ اما از آنجایی که مقدار اولیه آن‌ها transparent (شفاف) است، پس‌زمینه عنصر والد به طور خودکار از پشت عناصر فرزند نمایان می‌شود. با این حال، اگر روی یک عنصر والد پس‌زمینه رنگی یا تصویری بگذارید، عناصر فرزند اگر پس‌زمینه مستقل نداشته باشند، فضای پشت خود را شفاف نگه می‌دارند تا والد دیده شود.

• بهینه‌سازی پرفورمنس با background-attachment: fixed: استفاده از مقدار fixed برای ثابت نگه داشتن پس‌زمینه هنگام اسکرول صفحه، ظاهر جذاب و مدرنی ایجاد می‌کند؛ اما در برخی مرورگرهای موبایل یا صفحه‌نمایش‌های ضعیف، می‌تواند باعث افت فریم و لگ زدن در هنگام اسکرول شود زیرا مرورگر مجبور است تصویر را مدام رندر مجدد کند. در طراحی وب موبایل از این ویژگی با احتیاط استفاده کنید.

جمع‌بندی کلیدی

مدیریت پس‌زمینه در CSS فراتر از یک رنگ ساده یا قرار دادن یک عکس ثابت است. با تسلط بر ویژگی‌های تخصصی مانند background-repeat، تعیین موقعیت دقیق با background-position، و استفاده هوشمندانه از ویژگی مختصرنویسی (background)، می‌توانید کدهای خود را بهینه‌تر، کوتاه‌تر و خواناتر کنید. شناخت ترفندهایی نظیر لایه‌بندی چند تصویر و آگاهی از نحوه رفتار شفافیت و ارث‌بری، به شما کمک می‌کند تا طراحی‌های حرفه‌ای‌تر و استانداردی را در وب‌سایت خود پیاده‌سازی کنید.