سلام دوستان امیدوارم خوب باشید و پر انرژی و مثل همیشه آماده یادگیری?. تقریبا برای یه مدت طولانی نبودم و بابت این کارم حسابی معذرت میخوام. راستش درگیر یه سری کارها و پروژه‌ها بودم که باعث شده بود زمانبندی کارام به هم بریزه. اما به محض اینکه تونستم کمی کارها رو سبکتر کنم اومدم برای ادامه دوره آموزش css، با آموزش background در css. یه خبر خوب دیگه هم براتون دارم. اونم اینه که قراره خیلی زود همه آموزش‌های قدیمی و جدید، از جمله دوره‌های آموزشی که به صورت متنی در سایت درج میشدن، به صورت ویدیویی هم به سایت اضافه بشن و شما ویدیو جلسات رو داشته باشید. دیگه بیش از این مقدمه چینی نمیکنم و بیاید که با هم بریم سراغ آموزش.
خاصیت background در css:
قبل از شروع به آموزش نحوه استفاده از این خصیصه، بهتره ببینیم خصیصه background اصلا چیه و چه زمان مورد استفاده قرار میگیره؟!. زمانی که شما حین طراحی سایت یه تگ div یا سکشن، هدر، فوتر، سایدبار و… تعریف میکنید، میتونید از این خصیصه برای اون استفاده کنید. درواقع اگر شما برای مثال دوست داشته باشید رنگ پس زمینه تگ هدری که تعریف کردید آبی باشه، میتونید از خاصیت background استفاده کنید. پس به طور کلی مورد استفاده این خصیصه اعمال تغییرات ظاهری مثل رنگ، عکس و… در پس زمینه یک المنت html هست.
background فقط مربوط به رنگ نیست و انواع مختلفی داره که قراره در ادامه این مطلب دونه دونه به طور کامل همه موارد رو بهتون توضیح بدم. پس نگران نباشید و برای یادگیری دقیق و کامل این خصیصه مهم css، تا انتهای این مطلب همراه من باشید.
1- خصیصه background-color:
از این خصیصه به طور اختصاصی برای تغییر رنگ پس زمینه استفاده میشه. یعنی اگر یک تگ div داشته باشیم و بخوایم رنگ پس زمینه اون رو تغییر بدیم کافیه از این تیکه استایل استفاده کنیم. برای فهم بهتر نحوه استفاده از این استایل به کد زیر دقت کنید.
body {
background-color: lightblue;
}
در این مثال از استایل background-color در رابطه با تگ body استفاده کردیم. استفاده از این استایل باعث میشه رنگ پس زمینه تمام سایت به رنگ lightblue (آبی روشن)، در بیاد. شما میتونید از این استایل برای همه المنت‌های دیگه html مثل div، جدول، سکشن، هدر، فوتر و…. استفاده کنید. برای مقدار دهی خاصیت background-color، میتونید از یک رنگ استفاده کنید. اگه از درس چهارم دوره آموزش css، یعنی کار با رنگ‌ها در css به یاد داشته باشید، میتونید از اسم رنگ یا از کدهای RGB و هگز استفاده کنید.
2- خصیصه background-image:
این خصیصه مثل خصیصه قبلیه با این تفاوت که به جای استفاده از رنگ برای پس زمینه المنت‌ها از تصویر استفاده میکنه. یعنی شما یک تصویر رو به عنوان پس زمینه یکی از المان‌های تعریف شده در html، در نظر می‌گیرید. به مثال زیر دقت کنید.
body {
background-image: url(“bgdesert.jpg”);
}
در این مثال ما عکسی به نام bgdesert با پسوند jpg رو به عنوان پس زمینه کل سایت در نظر گرفتیم. درواقع چون این استایل رو به تگ body اختصاص دادیم به تمام سایت ما اعمال میشه. نکته مهمی که در رابطه با تصویر پس زمینه وجود داره اینه که باید آدرس تصویر رو به درستی و نسبت به root سایت تعریف کنیم. در غیر اینصورت کد به درستی کار نمیکنه. برای نمونه در کد بالا تصویر bgdesert.jpg دقیقاً در کنار فایل پروژه و درون هیچ پوشه خاصی نیست به همین دلیل فقط با نام و پسوند آدرس دهی رو انجام دادیم. اما اگه این عکس درون پوشه یا مسیر به خصوصی بود، کد بالا کمی متفاوت می‌شد و به شکل زیر تغییر میکرد.
body {
background-image: url(“../Images/bgdesert.jpg”);
}
این کد درواقع بیان میکنه که تصویر bgdesert.jpg در یک پوشه به نام Images قرار داره. که این پوشه Images در root یا همون ریشه سایت قرار داره. منظور از ریشه سایت پوشه‌ای در هاست یا سرور هست که فایل‌های سایت ما اونجا قرار داره.
3- خاصیت background-attachment:
این خصیصه بیشتر برای اعمال یه افکت ظاهری استفاده میشه. حتما شما هم سایت هایی رو دیدید که مثلا یک عکسی به عنوان پس زمینه در نظر گرفته شده اما وقتی صفحه اسکرول میشه عکس در جای خودش ثابته و متن حرکت میکنه. چنین افکتی به کمک همین خصیصه background-attachment اعمال میشه. کافیه مقدار این خصیصه رو به صورت fixed تعیین کنید. به مثال زیر دقت کنید.
body {
background-image: url(“img_tree.png”);
background-attachment: fixed;
}
4- خصیصه background-position:
از این خصیصه هم برای تعیین موقعیت قرار گرفتن پس زمینه استفاده میشه. برای مثال فرض کنید عکسی که انتخاب کردید دقیقا مطابق با سایز زمینه نیست. درواقع ممکنه این عکس خیلی کیفیت پایین و با ابعاد کم و یا کیفیت بالا و با ابعاد زیاد باشه. در اینجور مواقع ممکنه تصویر انتخابی به درستی نمایش داده نشه. به کمک این خصیصه میتونیم مشخص کنیم تصویر پس زمینه در چه موقعیتی قرار داشته باشه. به مثال زیر دقت کنید. این مثال به کمک استایل background-position تعیین میکنه که تصویر در موقیت سمت راست و بالای صفحه (body) قرار بگیره.
body {
background-image: url(“img_tree.png”);
background-position: right top;
}
5- خصیصه background-repeat:
حتما تا حالا براتون پیش اومده عکسی رو به عنوان پس زمینه تنظیم کنید اما از اونجایی که این عکس ابعاد کوچیکی داره تمام زمینه رو پوشش نده. در اینجور مواقع میتونید به کمک خصیصه background repeat تعیین کنید که عکس تکرار بشه یا نه؟. و اگه قراره تکرار بشه باید این تکرار در چه جهتی (عمودی، افقی، یا عمودی و افقی) تکرار بشه؟. به مثال زیر دقت کنید.
body {
background-image: url(“gradient_bg.png”);
background-repeat: repeat-y,x;
}
repeat-y,x به معنی تکرار عمودی و افقی تصویر تا زمانی که کل زمینه پوشش داده بشه است. repeat-x باعث تکرار افقی و repeat-y موجب تکرار عمودی تصویر مورد نظر میشه. همچنین no-repeat به معنی عدم تکرار تصویر پس زمینه است.
حرف آخر:
توی این مطلب با خصیصه background در css و حالت‌های مختلف اون آشنا شدیم. منتظر ویدیوهای آموزش این بخش باشید که به زودی در سایت قرار داده میشه. همچنین اگه سوالی درباره هر بخش دارید در انتهای همین مطلب ازم بپرسید.
