در مطالب قبلی در مورد قرار دادن تصویر پس زمینه در صفحات وب با استفاده از CSS3 نکاتی را به صورت مقدماتی بررسی کردیم.در این آموزش قصد دارم تا یکی از خاصیت هایی که در این زمینه کاربرد دارد را برای شما تشریح کنیم.
خاصیت background-size :
خاصیت background-size در CSS 3 ، اندازه عکس پس زمینه عنصر را تعیین می کند .
در CSS 2 ، اگر عکسی را به عنوان پس زمینه یک عنصر تعیین می کردید ، قادر نبودید اندازه آن را در هنگام نمایش در مرورگر تغییر دهید و قبلا می بایستی اندازه عکس را به میزان صحیح ، تعیین کرده بودید .
اما در CSS 3 ، شما می توانید یک عکس را به عنوان پس زمینه یک عنصر انتخاب کرده و سپس در هنگام نمایش در مرورگر اندازه آن را به اندازه دلخواه خود تغییر دهید . در این حالت برنامه با قابلیت سازگاری بهتری عمل خواهد کرد .
به وسیله خاصیت background-size ، می توانید یک عکس واحد را برای چندین عنصر به عنوان پس زمینه تعیین کرده و در هنگام نمایش در مرورگر ، اندازه آن عکس را براساس عنصر مربوطه تنظیم نمایید .
شکل کلی استفاده از این خاصیت به صورت زیر است :
; Syntax: background-size : value
; background-size : 30px :مثال
در زیر به تشریح هر یک از حالت های ممکن برای خاصیت background-size می پردازیم .
توضیح هر یک از موارد syntax :
value:
تعیین این پارامتر اجباری است .
این پارامتر تعیین کننده اندازه عکس پس زمینه برای عنصر است و می تواند به یکی از ۴ روش زیر مقدار دهی شود :
length : در این حالت اندازه ارتفاع و عرض عکس پس زمینه بر اساس واحدی مثل px تعیین می شود .
اگر یک عدد مثل ۳۰px تعیین شود ، اندازه ارتفاع و عرض عکس پس زمینه هر دو ، مقدار ۳۰px را خواهند داشت . اما می توان ۲ عدد پشت سر هم را نیز تعیین کرد، که در این حالت عدد اول تعیین کننده ارتفاع و عدد دوم تعیین کننده عرض عکس خواهد بود .
% : در این حالت اندازه ارتفاع و عرض عکس پس زمینه بر اساس درصد % نسبت به اندازه واقعی عکس ، تعیین خواهد شد .
اگر یک عدد مثل %۳۰ تعیین شود ، اندازه ارتفاع و عرض عکس پس زمینه هر دو ، مقدار %۳۰ اندازه واقعی عکس را خواهند داشت . اما می توان ۲ عدد پشت سر هم را نیز تعیین کرد، که در این حالت عدد اول تعیین کننده ارتفاع و عدد دوم تعیین کننده عرض عکس خواهد بود .
cover : در این حالت ، عکس پس زمینه به اندازه محتویات درون عنصر کوچک خواهد شد ، تا ارتفاع وعرض آن اندازه عنصر شود .
contain : در این حالت ، عکس پس زمینه به اندازه محتویات درون عنصر بزرگ خواهد شد ، تا ارتفاع وعرض آن اندازه عنصر شود .
پشتیانی در مرورگر های مختلف :
این خاصیت در تمام نسخه های جدید مرورگرهای مطرح پشتیانی می شود .
