کار با Backgrounds و ویژگی های آن در CSS
بعد از آشنایی نسبی با css، تعریف کلاس (class) و آی دی (ID)، نوبت به فراگیری تنظیمات مربوط به Backgrounds در CSS است، خوشبختانه CSS قابلیت های تقریبا کاملی در این خصوص دارد و هرآنچه که در طراحی وب فکرش را بکنیم با کد های آن دست یافتنی است، در ادامه خواهیم گفت که چگونه می توانید پس زمینه یا Background صفحات، لایه ها و المان های مورد نظر خود را با ویژگی های color، image، repeat، attachment و position به زیبایی شکل دهید و از آنها به طور سفارشی استفاده کنید.
شیوه نگارش کلی این عنصر و زیرمجموعه های آن به شکل زیر است:
<!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://webgoo.ir –>
<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 نیز مشخص می کند که نحوه تکرار شدن تصویر پس زمینه در صفحه به چه شکل باشد.
حال به بررسی جزئی تر هر یک از عناصر فوق می پردازیم.