استفاده از تگ background و bgcolor در html
اولین و آسان ترین روش تنظیم یک عکس در پس زمینه استفاده از تگ ساده background است و برای رنگ می توانید از تگ bgcolor و یک مقدار هگز استفاده کنید، برای مثال در کد زیر ما تصویری کوچک با نام bg.gif و رنگی با کد 009966 (این کدهای استاندارد در برنامه هایی نظیر فتوشاپ نیز کاربرد دارند) را به صفحه خود اختصاص داده ایم:
<!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>وبگو | تغییر پس زمینه با استفاده از html</title>
<!-- http://webgoo.ir -->
</head>
<body background="bg.gif" bgcolor="#009966" dir="rtl">
<hr />
تصاویر پس زمینه این صفحه، از تکرار یک تصویر کوچک ایجاد شده است.
</body>
</html>
پیش نمایش
توضیح:
- در حالت عادی مرورگر تصویر پس زمینه را تا جایی که تمام صفحه را پوشش دهد، در کنار هم تکرار خواهد کرد.
- برای دیدن رنگ پس زمینه، باید نمایش تصاویر را در مرورگرتان غیر فعال کنید.
- برای بدست آوردن کدهای هگز می توانید از ویرایشگر متون html یا برنامه هایی نظیر فتوشاپ استفاده کنید.
استفاده از background در css
اگر چه شیوه ای که در بالا گفتیم بسیار ساده و سریع است، اما روش استاندارد و امروزی نیست، در حال حاضر به جای کدهای خطی html از استایل های css برای تتنظیمات مربوط به ظاهر صفحات، از جمله رنگ و تصویر پس زمینه استفاده می کنند که از قدرت و انعطاف پذیری بیشتری برخوردارند، به مثال زیر توجه کنید:
<!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>وبگو | تغییر پس زمینه با استفاده از css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
background-color:#999;
background-image:url(bg.gif);
background-repeat:repeat;
}
</style>
</head>
<body>
</body>
</html>
کد بالا نیز مانند مثال قبل عمل خواهد کرد با این تفاوت که این بار می توانیم از تنظیمات بیشتری استفاده کنیم، به عنوان مثال ما تصویر bg.gif را تنها در راستای محمور x ها تکرار می کنیم و به تصویر پس زمینه قابلیت اسکرول در متن ها و صفحات طولانی می دهیم:
<!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>وبگو | تغییر پس زمینه با استفاده از css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
background-color:#999;
background-image:url(bg.gif);
background-repeat:repeat-x;
background-attachment:scroll;
direction:rtl;
}
</style>
</head>
<body>
<hr />
پس زمینه این صفحه، از تکرار یک تصویر کوچک در راستای محور x ها ایجاد شده است.
</body>
</html>
پیش نمایش
توضیح:
- مقادیر url را باید با آدرس کامل تصویر خود جایگزین کنید.
- background-repeat می تواند مقادیری از جمله repeat ، repeat-x، repeat-y و no-repeat داشته باشد.
- background-attachment قابلیتی است که می توانید به کمک آن پس زمینه ثابت یا متغیر (اسکرولی) داشته باشد، مقادیر آن fixed و scroll است.
- یک قابلیت دیگری که در مثال تنظیم نشده background-position است که موقعیت عکس پس زمینه را مشخص می کند، مقادیر آن bottom، center، left ، right و top است.