آموزش CSS ویژگی Background قسمت پنجم

بعد از آشنایی نسبی با css، تعریف کلاس (class) و آی دی (ID)، نوبت به فراگیری تنظیمات مربوط به Backgrounds در CSS است، خوشبختانه CSS قابلیت های تقریبا کاملی در این خصوص دارد و هرآنچه که در طراحی وب فکرش را بکنیم با کد های آن دست یافتنی است، در ادامه خواهیم گفت که چگونه می توانید پس زمینه یا Background صفحات، لایه ها و المان های مورد نظر خود را با ویژگی های color، image، repeat، attachment و position به زیبایی شکل دهید و از آنها به طور سفارشی استفاده کنید.

شیوه نگارش کلی این عنصر و زیرمجموعه های آن به شکل زیر است:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>سفارش دات نت | شیوه کلی نگارش عناصر background در css</title>
<style type="text/css">
body{
    background:url(background.gif);
    /*background-image:url(background.gif);*/
    background-attachment:fixed;
    background-color:#069;
    background-position:top;
    background-repeat:repeat-x;
}
</style>
</head>
<body>
</body>
</html>
توضیح:
- در کد بالا صفحه ای فرضی را با عناصر background شکل داده ایم.
- در قسمت مربوط به عکس پس زمینه می توان از background به صورت پیش فرض یا background-image به صورت حرفه ای تر، استفاده کرد.
- برای نوشتن یک نکته یا یادداشت در حین کدنویسی css از علامت /*یادداشت*/ استفاده می کنیم.
- در قسمت مربوط به url باید آدرس دایرکتوری (یا آدرس کامل تصویری که آپلود می کنید) را به همراه نام کامل فایل (با پسوند) قرار دهید.
- در کد بالا ما تصویری با ابعاد 5 پیکسل در 5 پیکسل را آنقدر در راستای محور x ها تکرار کرده ایم که سطر اول صفحه را به طور کامل پوشش داده است.
- رنگ پس زمینه صفحه را با background-color و یک مقدار هگز که به صورت 069# مشخص است، تنظیم کرده ایم.
- background-position موقعیت تصویر پس زمینه ما را در صفحه مشخص می کنید.
- background-repeat نیز مشخص می کند که نحوه تکرار شدن تصویر پس زمینه در صفحه به چه شکل باشد.
حال به بررسی جزئی تر هر یک از عناصر فوق می پردازیم.
عنصر background:
این عنصر می تواند مقادیر رنگی (هگز) یا آدرس یک تصویر را در خود داشته باشد:
.my-div-background{
    background:#093;
}
برای حالت های شفاف می توان از مقادیر transparent استفاده کرد.
عنصر background-image:
آدرس یک تصویر را به صورت url در خود دارد، این قابلیت، تصویر پس زمینه ما را با توجه به زیرمجموعه ای که در آن تعریف شده است، مشخص می کند، به فرض ممکن است در یک بلاک div از آن استفاده کنیم و لذا این عنصر تصویر پس زمینه آن بلاک را شکل می دهد:
my-div-background{
    background-image:url(bgimage.jpg);
}
برای نادیده گرفتن این قابلیت مقدار آن را none قرار می دهند.
عنصر background-attachment:
background-attachment به مرورگر می گوید که آیا تصویر پس زمینه با اسکرول صفحه، اسکرول شود یا خیر، اگر مقادیر آن را fixed قرار دهید، در صفحاتی که ارتفاع آنها از صفحه نمایش کاربر بیشتر است، نوار اسکرول کناری نمایش داده می شود و اگر کاربر به پائین یا بالای صفحه برود، تصویر پس زمینه در جای خود بدون تغییر و ثابت خواهد بود (این تکنیکی است که در برخی از قالب های وبلاگ ها نیز مشاهده می شود):
.my-div-background{
    background-attachment:fixed;
}

عنصر background-position:
background-position موقعیت تصویر پس زمینه ما را در محلی که استفاده شده، مشخص می کند، به فرض اگر بخواهیم تصویر خود را از سمت راست شروع به نمایش کنیم، باید از مقدار background-position:right استفاده کنیم؛ مثالی دیگر:
.my-div-background{
    background-position:bottom;
}
.my-div-background2{
    background-position:bottom left;
}
مقادیر این عنصر به صورت bottom، top، left، right و center است که قابلیت استفاده از دو خاصیت را به طور همزمان در خود دارد (به طور مثال background-position:top right).
عنصر background-repeat:
این عنصر برای مشخص کردن نحوه تکرار تصویر پس زمینه در صفحه به کار می رود، به فرض ممکن است بخواهیم تصویری تنها یک بار در پس زمینه تکرار شود یا برعکس بخواهیم که تمام پس زمینه را پوشش دهد، بدین منظور از این عنصر و خاصیت های آن استفاده می کنیم:
.my-div-background2{
    background-repeat:repeat-y;
}
مقادیر background-repeat به صورت repeat ،no-repeat، repeat-x و repeat-y تعریف می شود.
این بخش را با یک مثال کمی پیشرفته تر به پایان می بریم:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>سفارش دات نت| شیوه پیشرفته استفاده از عناصر background در css</title>
<style type="text/css">
body{
    background-color:transparent;
    height:1000px;
}
.bgdiv{
    background-image:url(background.gif);
    background-repeat:repeat;
    background-position:bottom;
    background-attachment:scroll;
    background-color:#F90;
    height:400px;
    width:600px;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>
<div class="bgdiv">
</div>
</body>
</html>

آموزش پس زمینه یا همون Background در css

نمونه ای از آخرین کارهای ما

آموزش CSS ویژگی Background قسمت پنجمReviewed by Goolexacom on Mar 28Rating: 4.5آموزش CSS ویژگی Background

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت