آموزش پس‌زمینه در CSS

پس‌زمینه در CSS

از خصوصیات پس‌زمینه در CSS برای تعریف جلوه‌های بصری پس‌زمینه عناصر HTML استفاده می‌شود. این خصوصیات به طراحان وب اجازه می‌دهد رنگ‌ها و تصاویر پس‌زمینه را به‌دلخواه سفارشی‌سازی کنند.

خصوصیات پس‌زمینه در CSS

• background-color: رنگ پس‌زمینه المان را تعیین می‌کند.
• background-image: یک تصویر را به‌عنوان پس‌زمینه تعیین می‌کند.
• background-repeat: نحوه تکرار تصویر را مشخص می‌کند.
• background-attachment: تعیین می‌کند که تصویر ثابت باشد یا با اسکرول حرکت کند.
• background-position: محل شروع تصویر پس‌زمینه را تعیین می‌کند.

تعریف رنگ پس‌زمینه

خصوصیت background-color در واقع رنگ پس زمینه ی یک المان را مشخص می کند . رنگ پس زمینه ی یک صفحه ی متعارف به صورت زیر تعریف (set) می شود :

    
    body {
        background-color: lightblue;
    }

در CSS، رنگ یک صفحه اغلب توسط مقادیر زیر تعیین می شود :

• یک مقدار RGB ( RED GREEN BLUE) : مانند rgb("255","0","0")
• اسم رنگ دلخواه (color name) : مانند "red"

در مثال زیر، h1، p، و المان های div رنگ های پس زمینه ی متفاوتی دارند :

    
    h1 {
        background-color: green;
    }
    div {
        background-color: lightblue;
    }
    p {
        background-color: yellow;
    }

افزودن تصویر پس‌زمینه

خصوصیت background-image در حقیقت تصویری برای استفاده به عنوان پس زمینه ی یک المان تعریف می کند . به صورت پیش فرض، تصویر تکرار می شود تا بدین وسیله بتواند کل عنصر (element) مربوطه را تحت پوشش قرار دهد . تصویر پس زمینه به صورت زیر انتخاب می شود :

    body {
        background-image: url("http://tahlildadeh.com/Temp/Css/paper.gif");
    }

تنظیم تکرار تصویر پس‌زمینه

به صورت پیش فرض، خصوصیت background-image یک تصویر را با هر دو نما یا صورت افقی و عمودی تکرار می کند . برخی از این تصاویر باید تنها به صورت افقی یا عمودی تکرار شوند، در غیر این صورت به گونه ای عجیب و نامتعارف به نظر می رسد، مشابه نمونه ی زیر :

    body { background-image: url("http://tahlildadeh.com/Temp/Css/gradient_bg.png"); }

در صورتی که اگر تصویر مورد نظر تنها افقی تکرار شود(repeat-x) ، پس زمینه ظاهر بهتری پیدا خواهد کرد :

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

غیرفعال‌سازی تکرار تصویر

برای نمایش تصویر بدون تکرار از no-repeat استفاده می‌شود.

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

در مثال فوق، تصویر پس زمینه درست در مکانی یکسان با متن نمایش داده شده است . حال می خواهیم موقعیت (position) تصویر را تغییر دهیم تا از این طریق تصویر مذکور شکل متن مورد نظر را برهم نزد . موقعیت تصویر توسط خاصیت background-position تعیین می گردد :

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

مختصرنویسی پس‌زمینه (Shorthand Background)

همان طور که در مثال های فوق مشاهده می کنید، خاصیت های فراوانی وجود دارند که حین پرداختن به پس زمینه و مدیریت آن باید درنظر گرفت . به منظور کاهش حجم کد، این امکان وجود دارد که تمامی خصوصیت ها (properties) را در تنها یک خصوصیت تعریف کرد . خاصیت مذکور همچنین shorthand (خصوصیت مختصر نویسی) اطلاق می گردد . خاصیت مختصرنویسی (shorthand property) ویژه ی پس زمینه همان "background": می باشد :

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

به خاطر داشته باشید که هنگام استفاده از خصوصیت مختصر نویسی، ترتیب مقادیر property ها به صورت زیر خواهد بود :

• 1.background-color
• 2.background-image
• 3.background-repeat
• 4.background-attachment
• 5.background-position

جمع‌ بندی

تمامی خصوصیت های پس زمینه ی CSS در جدول زیر تشریح شده :