جلسه چهارم: پس زمینه ها در CSS – آشنایی با CSS Backgrounds

پس زمینه ها در CSS – آشنایی با CSS Backgrounds

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

ویژگی های پس زمینه ها در CSS

برای انجام تنظیمات پس زمینه ها در CSS ما 6 ویژگی یا proprty داریم:

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

ویژگی background-color

ما با استفاده از این ویژگی میتونیم یک رنگ رو به پس زمینه selector خودمون اختصاص بدیم.

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

همونطور که در بالا میبینید من با استفاده از ویژگی background-color و با استفاده از روش تعیین رنگ RGB، رنگ مورد نظرخودم رو به تگ body اختصاص دادم.

در جلسه رنگ ها در CSS به نحوه چگونگی اختصاص رنگ به یک selector پرداختم و مفصل در این مورد توضیح دادم.

ویژگی background-image

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

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

ساختار کلی ویژگی background-image به این صورت است که بعد از دو نقطه و در قسمت مقدار از کلمه کلیدی url استفاده میکنیم و سپس داخل پرانتز باز و بسته آدرس تصویر خودمون رو مینویسیم. ما برای آدرس دهی از قواعد آدرس دهی در HTML استفاده میکنیم. اگه با آدرس دهی ها آشنا نیستید مطالب “آدرس دهی مطلق و نسبی” رو مطالعه کنید.

ویژگی background-repeat

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

مقدار پیش فرض ویژگی background-repeat برابر است با repeat. ما میتوانیم با قراردادن مقدار no-repeat این تکرار رو از بین ببریم و یا با استفاده از repeat-x تکرار را فقط در محور x ها قرار بدیم (عرض صفحه) و یا با استفاده از مقدار repeat-y تکرار را فقط در محور y ها قرار بدیم (ارتفاع صفحه). تصویر زیر رو ببینید:

همانطور که میبینید من با قراردادن مقدار no-repeat در ویژگی background-repeat از تکرار تصویر در پس زمینه جلوگیری کردم. این موضوع در مقایسه این تصویر با تصویر قبل کاملا مشخص هست.

تصویر زیر تصویری است که من برای پس زمینه body استفاده کردم که در اینجا با استفاده از مقدار no-repeat از تکرار اون جلوگیری کردم:

ویژگی background-position

همونطور که در مثال قبل دیدید زمانی که من از تکرار تصویر در پس زمینه جلوگیری کردم، این تصویر در گوشه سمت چپ نمایش داده شد. ویژگی background-position این امکان رو به ما میده که جایگاه تصویر در پس زمینه رو مدیریت کنیم. تصویر زیر رو ببینید:

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

ویژگی background-attachment

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

ما میتونیم یکی از پنج مقدار زیر رو برای ویژگی background-attachment انتخاب کنیم:

• scroll: تصویر پس زمینه با صفحه اسکرول می شود. این پیش فرض است
• fixed: تصویر پس‌زمینه با صفحه اسکرول نمیشه.
• local: تصویر پس زمینه با محتویات تگ حرکت میکنه.
• initial: از مقدار پیش فرض استفاده میکنه.
• inherit: این ویژگی را از عنصر والد خود به ارث میبره.

در اینجا توضیح دو مورد اول مدنظر من بود.در مورد initial و inherit که کاربرد عمومی دارند، در یک جلسه جداگانه صحبت خواهیم کرد.

ویژگی background

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

من ویژگی های زیر رو برای body تعریف کردم:

body{
     background-image:url(bg.jpg);
     background-repeat: no-repeat;
     background-position: top right;
     background-attachment: fixed;
}

همینطور که میبینید من از 4 ویژگی مختلف استفاده کردم. این امکان وجود داره که من با استفاده از ویژگی background اونها رو بصورت یکجا بنویسم و به این صورت کد من کوتاهتر میشه.

body{
     background: url(bg.jpg) no-repeat top right fixed;
}

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

ما در بالا 4 ویژگی رو به وسیله ویژگی background کوتاه کردیم. تگ background برای کوتاه کردن ویژگی های زیر کاربرد داره:

• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment

همه ویدیوهای دوره آموزش CSS