کم کم داریم توی دوره آموزش CSS وارد مراحل قشنگی میشیم! در مورد بک گراند ها (خدایی فارسی سخته توی این مسایل کدنویسی ! ) دنیای قشنگی وجود داره . میتونیم رنگ بدیم و عکس و فیلم و … خیلی کارها میشه کرد . تا الان یاد گرفتیم توی جلسه قبلی دوره آموزش CSS که رنگ بک گراند رو عوض کنیم و حتی رنگ رو transparent کنیم .
حالا فکر کنید ما میخوایم کل المان رو این کار رو باهاش بکنیم ! یعنی بیایم کل المان رو transparent کنیم و نه فقط بک گراندش رو !از خصوصیت opacity توی CSS استفاده میکنیم تا بتونیم این کار رو قشنگ پیاده سازی کنیم :
div {
background-color: green;
opacity: 0.3;
}
با این کار نه تنها میتونیم رنگ بک گراند رو transparent کنیم بلکه تمام متن ها و المان های داخل این المان div رو هم به همون میزانی که توی مثال بالا 30 درصد هست transparent کنیم .
عکس بک گراند در CSS
حالا میخوایم یاد بگیریم چطوری یه عکس رو بذاریم برای بک گراند یک المان با استفاده از کدهای CSS. از خصوصیت background-image استفاده میکنیم و آدرس عکس رو میدیم برای مقدار بهش . بقیه کارها رو خود مرورگر میکنه برامون ! مثال زیر رو ببینین :
body {
background-image: url("paper.gif");
}
از لحاظ طراحی بصری دقت کنین که عکس بک گراند با متنی که دارین میذارین جوری نباشه که متن خونده نشه ! این خصوصیت هم میتونین برای هر المانی استفاده کنین :
p {
background-image: url("paper.gif");
}
تکرار عکس بک گراند در CSS
مرورگرها بطور پیش فرض عکس رو تکرار میکنن در بک گراند . یعنی اگه عرض صفحه ما بیشتر از عکسی باشه که برای بک گراند ازش استفاده کردیم مرورگر اینقدر تکرار میکنه عکس رو تا صفحه رو کامل پوشش بده برامون . حالا تکرار هم در عرض داریم و هم در ارتفاع ! مرورگر جفتش رو انجام میده . برای تکرار عکس بک گراند از خصوصیت background-repeat استفاده می کنیم.
برای اینکه ما بتونیم یه عکس رو به دلخواه خودمون در محور افقی تکرار کنیم کافیه به خصوصیت background-repeat مقدار repeat-x رو بدیم بقیه کارها با مرورگره !
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
برای تکرار توی محور عمودی یا y هم که میدونین چی باید بذارین !؟ repeat-y .
اگر اصلا به هیچ وجه نمیخوایم که بک گراند تکرار داشته باشه هم !؟ no-repeat رو براش مقدار دهی میکنیم.
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
پوزیشن عکس بک گراند در CSS
تصور کنین که ما یه عکسی داریم و نمیخوایم تکرار هم بشه و میخوایم وسط المان ما هم دقیقا قرار بگیره. چیکار باید کرد !؟ استفاده از خصوصیت background-position این قابلیت رو میده بهمون که بتونیم پوزیشن یا محل قرارگیری بک گراند رو مشخص کنیم .
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
ضمیمه شدن عکس بک گراند در CSS
معادل فارسی باز هم سخته ! ببنین خیلی ساده بخوایم بگیم عکس بک گراند یا موقع اسکرول کردن با بقیه المان ها اسکرول میشه و یا موقع اسکرول کردن میتونه ثابت بمونه و تکون نخوره ! به این میگن attachment کردن عکس بک گراند . با خصوصیت background-attachment هم مشخص میشه . دو تا مقدار هم میگیره که fixed و scroll هستن.
مثال های زیر رو ببینین :
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
کوتاه کردن کدهای بک گراند
برای کوتاه کردن کدهای CSS مخصوص بک گراند میشه تمامی این کدهایی که توی این جلسه از آموزش CSS بهتون یاد دادیم رو توی یک کد خلاصه کنین ! هم سرعت لود خیلی خوب میشه و هم حجم فایل میاد پایین تر! (البته این رو بگم تنها استفاده این کد نیست که این کارها رو میکنه باید کلیه کدهاتون بهینه سازی بشه و مینیفای بشه که بعدا توضیح میدیم بهتون ! )
به کدهای مثال زیر توجه کنین :
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
خیلی راحت میشه با خصوصیت background خالی همه این خصوصیت ها رو داخلش آورد و تعداد خط کدهای CSS رو کم کرد :
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
وقتی از حالت کوتاه شده این کد استفاده میکنین حواستون باشه که ترتیب کدها برای مرورگر به این صورت هست:
background-color
background-image
background-repeat
background-attachment
background-position
