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

چهارشنبه ۰۸ بهمن ۱۴۰۴

Wednesday, January 28, 2026 GMT +3:30

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

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

آشنایی با HTML و CSS و دسترسی به سورس قالب

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

استفاده از تگ background و bgcolor در HTML

اولین و آسان ترین روش تنظیم یک تصویر در پس زمینه صفحات وب استفاده از تگ ساده background در HTML است، برای رنگ نیز می توانید از تگ bgcolor و یک مقدار کد هگز (Hexadecimal یا Hex) استفاده کنید، کدهای هگز به صورت ترکیبی از اعداد و حروف هستند که در وب برای نمایش یک رنگ بخصوص استفاده می شود (این کدهای استاندارد در برنامه های گرافیکی و برنامه نویسی کاربرد دارند)، برای مثال در کد زیر ما تصویری کوچک با نام bg.gif و رنگی با کد 009966 را به صفحه خود اختصاص داده ایم (به خصوصیات تگ body دقت کنید):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تغییر پس زمینه صفحه وب با خاصیت های HTML</title>
<!-- Webgoo.ir -->
</head>
<body background="bg.gif" bgcolor="#009966" dir="rtl">
<hr>
تصویر پس زمینه این صفحه، از تکرار یک تصویر کوچک ایجاد شده است.
</body>
</html>

پیش نمایش
توضیح:
- ابتدا باید فایل تصویر خود را در سرور سایت یا یک سرویس میزبان فایل آپلود و سپس آدرس URL تصویر را در قسمت background درج کنید، به طور مثال این آدرس می تواند مانند نمونه زیر باشد:

http://yoursite.com/upload/images/bg.gif

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

/upload/images/bg.gif

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

استفاده از background در CSS

اگر چه شیوه ای که در بالا گفتیم بسیار ساده و سریع است اما روش استاندارد و توصیه شده نیست، در حال حاضر به جای استفاده از کدهای خطی HTML توصیه می شود از استایل CSS برای تتنظیمات مربوط به ظاهر صفحات، از جمله رنگ و تصویر پس زمینه استفاده کنیم که از قدرت و انعطاف پذیری بیشتری برخوردار است، به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تغییر پس زمینه صفحه وب با CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    background-color:#999;
    background-image:url(bg.gif);
    background-repeat:repeat;
}
</style>
</head>
<body>
</body>

کد بالا نیز مانند مثال قبل عمل خواهد کرد با این تفاوت که این بار می توانیم از تنظیمات حرفه ای بیشتری استفاده کنیم، به عنوان مثال ما تصویر bg.gif را تنها در راستای محور X ها تکرار می کنیم و به تصویر پس زمینه قابلیت اسکرول در متن ها و صفحات طولانی را می دهیم:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تغییر پس زمینه صفحه وب با CSS</title>
<!-- 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 را باید با آدرس کامل تصویر خود جایگزین کنید، همان طور که در روش HTML گفته شد، فایل یا باید در یک سایت میزبان فایل آپلود و آدرس URL آن در این قسمت درج شود یا اینکه در سرور سایت شخصی آپلود و آدرس مطلق یا نسبی URL در این قسمت درج شود.
- background-repeat در CSS برای تعیین نحوه تکرار تصویر پس زمینه در صفحه نمایش است که می تواند مقادیری از جمله repeat ، repeat-x، repeat-y و no-repeat داشته باشد.
- background-attachment در CSS قابلیتی است که می توانیم به کمک آن پس زمینه ثابت یا متغیر (اسکرولی) داشته باشیم، مقادیر آن fixed و scroll است.
- یک قابلیت دیگر CSS که در مثال تنظیم نشده background-position است که موقعیت تصویر پس زمینه را در صفحه مشخص می کند، مقادیر آن bottom، center، left ، right و top است.

ویرایش تصویر پس زمینه استایل CSS خارجی

کدنویسی اغلب قالب های وب (سایت، وبلاگ و...) به گونه ای است که محتوای استایل CSS به صورت فایل خارجی در صفحه وارد یا به اصطلاح ایمپورت شده اند، لذا در نگاه نخست هیچ خاصیتی برای تعریف یا تغییر background مشاهده نمی کنیم، اما با کمی دقت متوجه خواهیم شد که در واقع کدهای CSS قالب در یک فایل خارجی قرار دارند که با تگ link در HTML به صفحه وب وارد شده اند، به طور مثال:

<link rel="stylesheet" type="text/css" href="style/style.css">

در اینگونه موارد برای ایجاد تغییرات دلخواه باید آدرس URL فایل CSS را بدست آوریم و کدنویسی background مورد نظر را پیدا کرده، پس از ویرایش، جایگزین کد قبلی نمائیم، انجام این کار در وبلاگ ها معمولا کمی زمانبرتر است چون قالب وبلاگ ها عمدتا در یک سایت دیگر آپلود شده اند و ابتدا باید فایل CSS را از آن سایت دریافت کنیم، به طور مثال ممکن است استایل CSS قالب وبلاگ بر روی آدرس فرضی زیر قرار گرفته باشد (از طریق بررسی سورس کد HTML قالب می توان آدرس URL فایل CSS آن را تشخیص داد):

http://yoursite.com/blog/template/style/style.css

اگر این URL صحیح باشد با ورود آن در نوار آدرس مرورگر باید کدهای CSS قالب به صورت متنی نمایش داده شوند، در این مرحله دو راه برای ویرایش قسمت background مورد نظر وجود دارد، هم می توانیم فایل CSS را پس از ویرایش و اعمال تغییرات دلخواه به کلی در یک سرویس دیگر آپلود کرده و آدرس URL آن را جایگزین مقدار فعلی در قسمت href در سورس کد HTML قالب نمائیم و هم می توانیم با تعریف استایل CSS خطی پس از قسمت link، به مرورگر بگوئیم که خاصیت خطی را به جای خاصیت تعریف شده در فایل اصلی اجرا کند، به فرض اگر در فایل style.css کلاسی با نام bg-class داشته باشیم، می توانیم با تعریف همان کلاس به صورت خطی پس از تگ link، بدون تغییر فایل اصلی، خاصیت های موجود در آن را تغییر دهیم:

<link rel="stylesheet" type="text/css" href="http://yoursite.com/blog/template/style/style.css">
<style type="text/css">
.bg-class{
    background-color:#999;
    background-image:url(bg.gif);
    background-repeat:repeat-x;
}
</style>

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

دسته بندی: آموزش کاربردی » HTML

برچسب ها: HTML - CSS

قبلی »

« بعدی

مطالب بیشتر:
کاربرد متاتگ refresh در صفحات وب (HTML)
نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
نحوه متحرک ساختن متن با تگ marquee در HTML

دیدگاه

۱۰۷ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

سعید

۱۲:۵۵ ۱۳۹۲/۱۱/۲۱

همچین میگی یک مقدار هگز اضافه کنید انگار آشپزیه

دوست گرامی عبارت "مقدار هگز" را باید با کسره در انتهای "مقدار" تلفظ کنید!

khairi

۰۰:۰۸ ۱۳۹۲/۱۰/۲۶

با سلام و احترام
لطفا اگه میشه درباره همین تغییر پس زمینه در css توضیحات ساده تری بفرمائید - من بعد از اون که موفق شدم هدر وبلاگم رو عوض کنم الان هم میخوام پس زمینش رو عوض کنم ولی نمیتونم : با تشکر فراوان

راه ساده تری جزء آشنایی با خاصیت های CSS و تمرین و تکرار و شروع از مقدمات وجود ندارد!

نويد

۱۳:۴۲ ۱۳۹۲/۱۰/۲۳

سلام خسته نباشيد ببخشيد چطوري ميتونم قالبي رو كه خودم ساختم تو وبلاگم بذارم

کد قالب را در قسمت ویرایش قالب درج کنید، البته قاعدتا باید فایل های مربوطه نیز در یک سرویس دهنده آپلود شده و آدرس های به کار رفته در قالب متناسب با آدرس های جدید جایگزین شوند.

الهام

۱۳:۵۷ ۱۳۹۲/۱۰/۲۲

مرسی از راهنماییتون در مورد نحوه گذاشتن عکس. ولی من دارم اچ تی ام ال رو با سایت شما یاد می گیرم اگه بخوام برای تمرین تصویر بیارم یا رنگ پس زمینه رو عوض کنم چی کار باید بکنم و چه کدی بنویسم. ممنون

برای این حالت کافی است تصویر را در کنار فایل HTML در یک دایرکتوری قرار دهید و در قسمت url صرفا نام فایل را بنویسید (مشابه نمونه کد آموزش حاضر).

الهام

۱۲:۲۵ ۱۳۹۲/۱۰/۲۱

سلام ممنون از سایت خوبتون ولی من برای گذاشتن عکس تو سایت یا تغییر پس زمینه مشکل دارم و اصلا عکس ها رو باز نمیکنه ممنون میشم راهنماییم کنید و بگید کجای کدم مشکل داره.

<style type="text/css">
body{
    background-color:#c99;
    background-image:desktop/fatemeh/1.png;
    background-repeat:repeat;
}
</style>

در قسمت background-image باید از پارامتر url و آدرس یک تصویر آپلود شده در وب استفاده کنید نه آدرس یک فایل در هارد کامپیوتر!، مثال:

background-image:url(http://yoursite.com/fatemeh/1.png);

نکته: روش آدرس دهی نسبی (بدون ذکر آدرس کامل تصویر) تنها در شرایطی عمل می کند که فایل CSS در یک دایرکتوری و در یک سرور در کنار سایر تصاویر قرار داشته باشد.

علی

۱۷:۱۴ ۱۳۹۲/۰۹/۱۸

سلام
من میخوام قالب یه وبسایت رو تغییر بدم و مال خودم رو بذارم
چطوری این کار رو بکنم؟ البته با نرم افزار دریم ویور

این بستگی به سیستم مدیریت سایتی دارد که قصد تغییر قالب آن را دارید، در کل باید فایل های مربوط به قالب را پیدا کرده و مطابق سلیقه خود ویرایش نمائید (نیازمند تسلط بر HTML، CSS و همچنین آشنایی با سیستم مدیریت سایت است).

sara

۱۷:۱۰ ۱۳۹۲/۰۸/۱۸

سلام من یه قالب آماده دارم که میخوام بک گراندش رو عوض کنم اما توی مدیریت قالب که میرم آدرسی که واسه عکسه گذاشته نیست من چطور میتونم بک گراندم رو عوض کنم ؟ لطفا کمک کنید :(

به احتمال زیاد فایل مربوط به پس زمینه در استایل CSS قالب قرار دارد که ویرایش آن نیازمند داشتن اطلاعات کافی و تجربه قبلی است.

h.m

۱۵:۱۸ ۱۳۹۲/۰۷/۲۹

با سلام
من یک قالب آماده رو برای سایتم ویرایش کردم و در حالت آفلاین قالب به درستی نمایش داده می شود ولی هنگام آپلود روی سرور فقط فونت ها و عکس ها به صورت به هم ریخته نمایش داده می شود و از آپلود تمام فایل ها مطمئن هستم لطفا راهنمایی کنید

رفع مشکل بدون دیدن و تست قالب به صورت آنلاین امکانپذیر نیست!

آرش هخامنش

۱۹:۴۰ ۱۳۹۲/۰۷/۲۰

سلام دوست گرامی
من یه قالبی رو پیدا کردم گذاشتم رو وبم توش دستکاری کردم و ویرایشش کردم همه چی خوب بود شد اونی که میخوام ولی پس از چند روز عکس پس زمینه بالا نمیاد نمیدونم چرا اینم نشانی عکس پس زمینشه که تو کدش هست

<link href="http://dls7.silverseven.ir/theme%20blog/Historical%20skin/00002/styles.css" rel="stylesheet" type="text/css" media="screen" />

ممنون میشم بیای تو وبم بگی باید چی کار کنم عکس خودش برگرده
و چه جوری تغییرش بدم تو ویرایش قالب تنها این رو بلد نیستم
خیلی ممنون میشم کمکم کنید

فایل مورد نظر قابل بارگذاری و بررسی نیست!

malihe

۱۲:۵۸ ۱۳۹۲/۰۶/۱۲

سلام. خسته نباشید. چگونه میتوانیم نشانه گر موس را در وبلاگ خود تغییر دهیم؟

برای این کار باید به سایت های ارائه دهنده کدهای جاوا اسکریپت برای وبلاگ نویسان مراجعه کنید.

مهدی

۲۲:۴۰ ۱۳۹۲/۰۶/۰۵

سلام یه لطفی کنید این کد قالبمه خودتون عوضش کنید پس زمینه رو رنگ روشن بزارید
اینم کد:

حذف شد

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

حمید

۱۶:۴۵ ۱۳۹۲/۰۶/۰۱

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

فاطمه

۰۱:۰۰ ۱۳۹۲/۰۵/۱۱

سلام خسته نباشید من بلاگم رو هنوز موتور های جستجو پیدا نکردن و خودم هم جایی ثبت نکردم
من عکسی رو که می خواستم هدست بلاگم باشه رو انتخاب کردم و دستورات شما رو اجرا کردم اما عکس ناقص رو بلاگم اومده و تمام هدست رو پوشش نداد یعنی قسمت راست هدست خالیه قسمت چپش تصویر قرار گرفته!! چی کار کنم؟راستی برای ثبت بلاگم به کدوم آدرس برم؟ لطف می کنید جوابم رو بدید با تشکر از شما

برای ثبت وبلاگ در موتورهای جستجو، کافی است با چند وبلاگ قدیمی تر تبادل لینک داشته باشید، وبلاگ شما پس از مدتی در موتورهای جستجو ثبت خواهد شد (هرچند موتورهای جستجوی مختلف قسمتی تحت عنوان ابزار وبمستر دارند، اما این امکان اغلب تنها در مورد سایت ها کاربرد دارد)، در مورد هدر، یا باید اندازه عکس را در نرم افزارهایی مانند فتوشاپ تغییر دهید یا اینکه با CSS آشنا باشید و قالب وبلاگ را ویرایش کنید، خارج از این چارچوب روش دیگری وجود ندارد.

sami mohebi RAD

۱۵:۰۴ ۱۳۹۲/۰۴/۲۹

با CSs تا حدودی اشنام ولی bg رو واسه تغییر پس زمینه پیدا نمی کنم لطفا راهنماییم کنین

استایل قالب در فایل های CSS وجود دارد، به طور مثال:

tem.parstools.com/novindl/images/style.css

البته ظاهرا قالب به صورت پیش فرض پس زمنیه ای ندارد، لذا باید استایل را به فرض برای تگ body یا یک بلاک div که در بالاترین سطح قرار دارد، خودتان تعریف کنید، به طور مثال کد زیر را ویرایش کنید و در قالب قرار دهید:

<style type="text/css">
body{
    background-color:#999;
    background-image:url(bg.gif);
    background-repeat:repeat;
}
</style>

که قسمت URL باید با آدرس کامل تصویر جایگزین شود.

sami mohebi RAD

۲۳:۲۱ ۱۳۹۲/۰۴/۲۶

سلام من می خواسم پس زمینه این قالب رو

http://mohamadghasemii.blogfa.com

تغییر بدم به جاش این

http://uplod.ir/cbk2wvzy75uf/ _(109).jpg

عکس رو بذارم لطفا راهنماییم کنین

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

صفحه 5 از 8

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