تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017




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

استفاده از تگ 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://sefaresh.net -->
</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://sefaresh.net -->
<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://sefaresh.net -->
<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 است.


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین