آموزش ویژگی Background در CSS
در مبحث اول فصل چهارم آموزش CSS راجع به ویژگی Background در صفحات به واسطه CSS صحبت میکنیم.
خوب Background چیست؟
در کل وقتی شما تصویری و یا رنگی را در پس زمینه سایت تان قرار میدهید Background گفته میشود.
به تصویر زیر دقت کنید که به صورت یک کاغذ نمایش داده شده تصویر Background صفحهء ویب به شمار میاید.
نکته: این خاصیت در تمامی مرورگر ها قابل شناخت است.
خاصیت Background در CSS دارای خاصیت های ترکیبی ذیل میباشد که با خاصیت اصلی یکجا شده امکانات بیشتر را فراهم مینمایید.
Background-color : این خاصیت رنگ پس زمینه را تعیین میکند یعنی میتوانید بجای تصویر زمینه صفحه تانرا رنگ انتخاب نمایید. برای انتخاب نوع به فصل دوم مراجعه نمایید.
Background-color:red;
position -Background : در صورتی که شما بخواهید یک تصویر و یا یک آیکن برای قسمتی از پس زمینه در نظر بگیرید از این خاصیت استفاده می کنید ، با این خاصیت مختصات قرار گرفتن آیکن و یا تصویر را مشخص می کنید.
مثال :
Background-position: 120px 150px در این مثال بصورت پیکسلی مختصات میدهید.
Background-position: left شما نیز میتوانید تعیین کنید تصویر پس زمینه در سمت چپ ، راست ، بالا یا پایین قرار بگیرد.
Background-size : این خاصیت تازه وارد دنیایی ویب گردیده یعنی تنها در CSS3 قابل نمایش است و البته با استفاده از این خاصیت میتوانید اندازه تصویر تانرا تعیین نمایید.
مثال:
Background-size: 80px 60px بصورت پیکسلی میتوانید عرض و ارتفاع پس زمینه را مشخص کنید.
Background-size: 100% 100% بصورت درصدی میتوانید عرض و ارتفاع پس زمینه را مشخص کنید.
Background-size: cover عرض تصویر را با توجه به عرض صفحه بزرگ میکند ، ارتفاع را نیز با توجه به عرض بزرگ می کند.
توجه : به دلیل اینکه ممکن است ارتفاع صفحه کمتر از عرض و یا بر عکس آن باشد بخشی از تصویر حذف شود و خارج از صفحه قرار بگیرد و نمایش داده نشود
Background-size: contain ارتفاع تصویر را با توجه به ارتفاع صفحه بزرگ می کند و عرض تصویر را نیز با توجه به ارتفاع تغییر میدهد و نهایتا تمام تصویر نمایش داده میشود.
توجه : به دلیل اینکه ممکن است اندازه صفحه بزرگ باشد ، تصویر در تمام صفحه قابل نمایش نباشد.
Background-size: initial تصویر پس زمینه بصورت عادی و در اندازه ی واقعی تصویر ، نمایش داده میشود.
نکته : به یاد داشته باشید این خاصیت ها در مرور گرهای IE9+, Firefox, Opera, Chrome, Safari پشتیبانی میشود .
Background-repeat : با این خاصیت میتوانید تعیین کنید که تصویر پس زمینه ای که برای Background در نظر گرفتید ، تکرار شدنی باشد یا خیر به مثال های زیر توجه نمایید!
مثال :
Background-repeat: no-repeat تصویر تکرار نشود (به حالت عادی نشان داده میشود).
نحوه نوشتن:
Background-repeat:no-repaet;
Background-repeat: repeat تصویر تکرار شود (اگر تصویر از حد معمول کوچکتر باشد تکرار میشود و تمام صفحه را می پوشاند).
نحوه نوشتن:
Background-repeat:repeat;
نتیجه:
Background-repeat: repeat-x تصویر را در عرض یا به شکل افقی تکرار میکند.
Background-repeat: repeat-y تصویر را در طول یا به شکل عمودی تکرار میکند.
Background-origin : این خاصیت تازه وارد دنیایی ویب گردیده یعنی تنها در CSS3 قابل نمایش است و البته این خاصیت تصویر پس زمینه را با توجه به مقداری که برایش تعیین می کنید در صفحه قرار میدهد. مثال :
Background-origin: border-box نسبت به border و حاشیه ی صفحه یا باکس تصویر را قرار میدهد.
Background-origin: content-box نسبت به محتوای صفحه تصویر را تطبیق می کند.
Background-origin: padding-box نسبت به padding صفحه تصویر را قرار میدهد.
Background-origin: initial بصورت عادی تصویر را قرار میدهد، با توجه به تنظیمات
پیشفرض.
یادداشت : در مورد Padding بصورت مفصل در فصل اتی بحث خواهیم کرد.
نتیجه :
Background-image : میتوانید با این خاصیت یک تصویر برای پس زمینه انتخاب کنید.
مثال :
Background-image:url(sample.png);
شما میتوانید خاصیت های بالا را به صورت خلاصه نیز بنویسید. که البته این نوع نوشتن خاصیت ها به دلیل جلوگیری از ضایع شدن وقت بیشتر استفاده میشود.
تمامی خاصیت های Background را توضیح دادیم ، در صورتی که بخواهید بصورت خلاصه نویسی از این خاصیت ها استفاده کنید ، میتوانید از دستور زیر پیروی کنید : (پیشنهاد ما برای استانداردسازی کد های تان خلاصه نویسی است)
Background:color position size repeat clip attachment image initial | inherit ;
Multiple Background
حال میخواهیم با ادغام دستورات قبلی چندین تصویر را همزمان بالای همدیگر قرار دهیم و در پس زمینه صفحه خود قرار دهیم شما میتوانید چند تصویر را روی هم قرار بدهید و چند background داشته باشید . برای این کار به مثال زیر توجه نمایید:
مثال: در اینجا ما میخواهیم دو تصویر را روی همدیگر قرار دهیم قسمی که تصویر دوم در زیر تصویر اول قرار بگیرد.
#sample{
Background-image:url(sheep.png), url(gress.png);
Background-position:center bottom,left top;
Background-repeat:no-repeat, repeat;
}
توجه داشته باشید در استفاده Background-position و Background-repeat هم باید ترتیب تصاویر که در Background-image تعریف نموده اید مد نظر بگیرید.
حالا نتیجه دستور بالا به شکل زیر است.
توجه : در استفاده Multiple background ها شما باید از خلاصه نویسی استفاده ننماید و باید هر خاصیت را به صورت مجزا بنویسید!
مرورگر های که از خاصیت Background در CSS پشتیبانی میکند قرار زیر است:
دیدگاه ها