انتخاب رنگ سبز انتخاب رنگ آبی انتخاب رنگ قرمز

Background یا پیش زمینه در CSS

CSS3 Background

CSS3 جتد ویژگی جدید برای پیش زمینه ها دارد ، که به شما کنترل بیشتری را اهدا میکند .

در این درس شما با ویژگی های زیر آشنا می شوید :

  • background-size
  • background-origin

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

پشتیبانی مرورگر ها
پشتیبانی مرورگر ها از CSS3 Border

فایرفاکس 3.6 و قدیمی تر برای این ویژگی نیاز به پیشوند -moz دارد .
سافاری 4 برای این ویژگی نیاز به پیشوند -webkit دارد .
اینترنت اکسپلورر 9 ، فایرفاکس 4 ، کروم و سافاری 5 و اپرا از ویژگی های جدید بکگراند پشتیبانی می کنند.
ویژگی background-size در CSS3

با استفاده از background-size میتوانید سایز تصویر پیش زمینه را تعیین کنید .
تا پیش از CSS3 ما باید بکگراند ها را ابتدا کوچک میکردیم و سپس آن را استفاده میکردیم . ولی حالا میتوانیم از یک بکگراند در چند سایز مختلف استفاده کنیم .
شما میتوانید از پیکسل (px) یا درصد استفاده کنید .

نمونه (با پیکسل)
Internet ExplorerFirefoxChromeSafariOpera
div {
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
background-repeat:no-repeat;
}
نمونه (با درصد)
Internet ExplorerFirefoxChromeSafariOpera
div {
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}
ویژگی background-origin در CSS3

در CSS3 از ویژگی background-origin برای مشخص کردن مکان پیش زمینه یا همان بک گراند استفاده میشود .
تصویر پیش زمینه میتواند در قسمت محتوا یا در مکان حاشیه یا مکان padding (فاصله از داخل) قرار بگیرد.


نمونه (background-origin)
Internet ExplorerFirefoxChromeSafariOpera
div {
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
پیش زمینه های چندگانه با CSS3

با استفاده از CSS3 میتوانید از چندین بکگرند یکجا استفاده کنید

نمونه (استفاده از چند بکگراند)
Internet ExplorerFirefoxChromeSafariOpera
body {
background-image:url(img_flwr.gif),url(img_tree.gif);
}
شرح دادن ویژگی های فوق

برای دیدن صفحه مخصوص هر یک از ویژگی های فوق روی نام آن ها کلیک کنید :

وی بی ایران در Facebook

صفحه رسمی وی بی ایران در فیس بوک قصد دارد تا بهترین مطالب را به Stream شما ارسال کند . اگر میخواهید :
  • استایل های جدید
  • هک های جدید
  • مقاله های محبوب
  • خبر های جدید ویبولتین
  • و ..
برای شما ارسال شود ، هم اکنون پیج ما را لایک کنید .
برای ورود به صفحه رسمی وی بی ایران روی آیکن فیس بوک کلیک کنید .