تبلیغات
Fact World - چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟

آموزش برنامه نویسی و مهارتهای وب

article 

چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟

html-background

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


استفاده از تگ 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 است.
section دسته بندی: آموزش کاربردی - آموزش کاربردی HTML -


یکشنبه 13 مهر 1393

نظرات ()


سه شنبه 28 شهریور 1396 07:29 ق.ظ
Aw, this was a very good post. Taking the time and actual effort to create a good article… but what can I say… I procrastinate a whole lot and never seem to get nearly anything done.
سه شنبه 17 مرداد 1396 04:52 ق.ظ
I have read several just right stuff here. Certainly value bookmarking
for revisiting. I wonder how so much effort you put to make such
a magnificent informative site.
دوشنبه 16 مرداد 1396 02:31 ب.ظ
Appreciate this post. Let me try it out.

نظر خود را ثبت کنید:

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



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )