آموزش سی اس اس CSS

پراپرتی بک گراند برای تعریف پس زمینه برای المان ها استفاده میشود.

پراپرتی های بک گراند به شرح زیر است:

Background Color

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

مثال

 
body {
    background-color: lightblue;
}
 

شما میتوانید به جای نام رنگ از مقادیر آنها استفاده کنید.

مطالعه بیشتر: رنگ ها در سی اس اس

Background Image

پراپرتی background-image برای مشخص کردن تصویر بعنوان تصویر پس زمینه استفاده میشود

مثال

 
body {
    background-image: url("bg.jpg");
}
 

نکاتی که باید در ذهن داشته باشید

زمانی که از تصویر پس زمینه استفاده میکنید دقت کنید از تصویری استفاده کنید که باعث نشود نوشته های شما ناخوانا شود.

بصورت پیش فرض تصویر پس زمینه تکرار میشود و کل المان را میپوشاند.

Background Repeat

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

برخی تصاویر باید یا عمودی تکرار شوند و یا افقی، در غیر اینصورت تصویر عجیب بنظر میرسد.

مثال

اگر تصویر بالا تنها بصورت افقی تکرار شود، تصویر پس زمینه بهتر به نضر می آید:

دستور تکرار افقی بکگراند بصورت زیر است:

 
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
 

Background Position

اگر بخواهید تصویر یکبار تکرار شود از دستور background-repeat آستفاده کنید.

 
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}
 

توجه داشته باشید چه صفحه شما راست چین (rtl) باشد و چه چپ چین (ltr) بصورت پیش فرض تصویر پس زمینه سمت چپ قرار میگیرد. برای اینکه تصویر پس زمینه جابجا شود باید از پراپرتی background-position استفاده کنید:

 
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}
 

نتیجه کار بدین صورت میشود:

Background Attachment

برای اینکه تصویر پس زمینه شما فیکس باشد و با اسکرول صفحه تصویر اسکرول نخورد از پراپرتی background-attachment استفاده کنید.

 
body {
    background-image: url("mountain.jpg");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}
 

نتیجه کار بصورت زیر میباشد:

Background

میتوان کدهای بکگراند را کوتاه کرد و تمامی پراپرتی های بکگراند را داخل یک پراپرتی آورد.

پراپرتی کوتاه شده بکگراند background نام دارد.

 
body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}
 

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

اگر یکی از مقادیر جا بیافتد ولی سایر مقادیر به ترتیبی که در بالا اشاره شد نوشته شده باشند اهمیت نخواهد داشت