جهان سایت

طراحی وب سایت | خدمات سئو حرفه ای | بازاریابی اینترنتی

طریقه کار با پس زمینه در css

 بررسی کار با Backgrounds و کار با آن در CSS

در این نوشته می خواهیم کمی به یادگیری تنظیمات مربوط به پس زمینه در CSS بپردازیم، خوشبختانه CSS قابلیت های تقریبا کاملی در مورد پس زمنه و تغییرات در این مورد دارد و هرآنچه که در طراحی وب فکرش را بکنیم  و بخواهیم اعمال کنیم با کد های css دست یافتنی است که در ادامه متن کمی در مورد آن توضیح می دهیم.

FreeBackgroundImagesCss

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>جهان سایت | شیوه کلی نگارش عناصر background در css</title>
<!-- http://jahansite.com -->
<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 می بایست آدرس دایرکتوری و یا آدرس کامل تصویری که قرار می دهید  را به همراه نام کامل فایل به همراه پسوند قید کنید.
– در کد بالا ما تصویری با ابعاد ۵ پیکسل در ۵ پیکسل را آنقدر در راستای محور x ها تکرار کرده ایم که سطر اول صفحه را به طور کامل پوشش داده است.
– رنگ پس زمینه صفحه را با background-color و یک مقدار  به صورت عدد دهی هگز دسیمال که به صورت ۰۶۹# مشخص است،قرار دادیم.
– background-position موقعیت تصویر پس زمینه ما را در صفحه تعیین می کند.
– background-repeat  تعیین می کند که نحوه تکرار شدن تصویر پس زمینه در صفحه به چه شکل باشد.

ویژگی background:

این ویژگی می تواند مقادیر رنگی که به صورت عدد دهی یا url یک تصویر را در خود داشته باشد:

.my-div-background{
    background:#093;
}

برای حالت های شفاف که می خواهین پس زمینه مشخص باشد می توان از مقادیر transparent استفاده کرد.

ویژگی

background-repeat:

این ویژگی برای مشخص کردن نحوه تکرار تصویر پس زمینه در صفحه به کار می رود، به فرض ممکن است بخواهیم تصویری تنها یک بار در پس زمینه تکرار شود بدین منظور از این ویژگی و خاصیت های آن استفاده می کنیم:

.my-div-background2{
    background-repeat:repeat-y;
}

مقادیر background-repeat به صورت repeat ،no-repeat، repeat-x و repeat-y تعریف می شود.
این بخش را با یک مثال کمی پیشرفته تر به پایان می بریم:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>جهان سایت | شیوه پیشرفته استفاده از عناصر background در css</title>
<!-- http://jahansite.com -->
<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>