آموزش ایجاد پس زمینه تمام صفحه در css

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

ابتدا به یک تصویر با کیفیت نیاز داریم. تصویری با ابعاد حدود 1080*1920 به بالاتر. البته حجم آن نباید زیاد باشد که باعث کند شدن بارگذاری صفحه در اینترنت شود.

فایل CSS را به صفحه لینک می کنیم:

در فایل CSS برای تگ body دستورات زیر را می نویسیم:

body{
    background: url('bg.jpg') no-repeat center center fixed;
    background-size: cover;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
}

در دستورات background پارامتر اول مربوط به background-imag یا آدرس تصویر است:

url('bg.jpg')

• پارامتر دوم مربوط به background-repeat است که مقدار no-repeat دارد، یعنی پس زمینه تکرار نشود.
• پارامتر سوم و چهارم مربوط به background-position است، موقعیت تصویر در صفحه را تعیین می کند که مقدار center  center یعنی وسط تصویر به وسط صفحه منطبق می شود.
• پارامتر آخر مربوط به background-attachment است که مقدار fixed یعنی پس زمینه در صفحه ثابت باشد و اسکرول نشود.
• Background-size هم اندازه پس زمینه را مشخص می کند که مقدار cover یعنی تصویر کل صفحه یا در برگیرنده خود را پر کند.

برای سازگاری با انواع مرورگر ها backround-size را به سه صورت دیگر نیز نوشته ایم.

background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;