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

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

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

قبلی »

« بعدی

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

دیدگاه

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

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

یه نفر

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

سلام .
مطالبتون خیلی خوب بود ولی من هیچی نفهمیدم .
من یه قالب داشتم که می خواستم فقط تصویر زمینشو مشکی کنم .
اگه میشه منو راهنمایی کنید. ممنون میشم

متاسفانه هیچ راه حل خیلی آسانی در این مورد به جزء آنچه در آموزش گفته شده وجود ندارد!

شکوه

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

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

<link href="http://../c.css" type="text/css" rel="stylesheet">

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

حدس ما این است که آدرس دهی فایل ها در استایل CSS به صورت نسبی است نه مطلق، به طور مثال به این صورت است:

background:url(../bg.jpg);

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

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

بر اساس نحوه آدرس دهی فایل bg.jpg در آدرس کامل زیر قرار دارد:

http://yoursite.com/template/bg.jpg

شکوه

۱۹:۱۳ ۱۳۹۳/۱۱/۲۷

با سلام
قالب وبلاگی که انتخاب کردم برای backgrund یک تصویر پس زمینه داره. که آدرس این تصویر در کد html که در قسمت ویرایش قالب می گردم نیومده. و خودم کدی بصورت

body-background{
background:url(http://......image/2.jpg)

وارد کردم ولی تصویر پس زمینه تغییر نکرد. بنظرم طراح غیر قابل تغییرش کرده.
می تونید کمکم کنید. ممنونم از لطف شما؟

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

راحله

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

سلام
میخواستم بدونم اگه نخوایم که عکس تکرار بشه و بخوایم تنها خود عکس رو نشون بده باید چیکار کنیم ؟؟؟
نمیخوام تو محورها تکرار بشه

از مقادیر no-repeat برای background-repeat استفاده کنید.

سجاد

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

سلام.
میخوام تصویر هدر رو عوض کنیم.
وقتی این آدرس (/avazak.ir/Theme/style/740.css) رو سرچ میکنم صفحه ای باز میشه که قابل تغییر نیست. لطفا راهنمایی ام کنید.
در ضمن کد نویسی html رو بلدم.
این هم قسمت اول کدهای وبلاگمه. نمی دونم از کجاش باید عکس رو تغییر بدم.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META NAME="description" CONTENT="<-BlogAndPostTitle-> - <-BlogDescription->">
<META NAME="keywords" CONTENT="<-BlogAndPostTitle->,<-BlogId->, Blog, Weblog, Persian,Iran, Iranian, Farsi, Weblogs, Blogs">
<META NAME="DesignerUrl" CONTENT="http://Avazak.ir">
<META NAME="Designer" CONTENT="AVAZAK">
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->" />
<meta name="GENERATOR" content="BlogFa.com">
<title><-BlogAndPostTitle-></title>
<link href="http://avazak.ir/Theme/style/740.css" type="text/css" rel="stylesheet">
</style>

دو راه برای این کار وجود دارد، راه حل ساده تر این است که آی دی header را در زیر کدهای مربوط به فایل CSS به صورت نمونه زیر درج کنید:

<style type="text/css">
#header {
	background:url('http://yoursite.com/image/your-image.jpg') no-repeat top center;
}
</style>

با این کار می توان تنظیمات اصلی را دوباره نویسی کرد و تصویری سفارشی در آی دی header تنظیم کرد، تصویر شما باید در سایتی آپلود و آدرس آن جایگزین نمونه URL شود.
راه حل دیگر این است که فایل بالا (فایل 740) را در مرورگر خود وارد کرده و اطلاعات متنی آن را در یک فایل با فرمت css. ویرایش و ذخیره کنید، سپس این فایل را در یک سایت آپلود و آدرس جدید آن را جایگزین قسمت link href در کدهای قالب کنید.

مهسا

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

سلام
من هیچی نفهمیدم!!
خیلی پیچیده نوشتین!!
یکم بهتر توضیح بدین.

کار با کدهای HTML نیازمند آشنایی قبلی است، متاسفانه امکان طرح مجدد مباحث مقدماتی در آموزش های کاربردی وجود ندارد.

raha

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

سلام
چه تنظیماتی باید انجام داد تا اندازه صفحه به صورت اتوماتیک بشه مثلاً اگر صفحه را روی گوشی می بینیم درست با صفحه گوشی فیکس شده باشه؟

تنظیمات ساده ای برای این کار وجود ندارد، در طراحی قالب های وب روشی به نام قالب های رسپانسیو (Responsive) وجود دارد که با استفاده از media queries در CSS می توان تا حدی چنین مواردی را ایجاد کرد.

فریبا

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

هییییی بد نبود

بهنود

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

دوست عزیز با توجه به اینکه من مبتدی هستم و شما خیلی فنی توضیح دادی ولی در کل یه چیزایی فهمیدم
اما باز هم نتونستم یه عکس بذارم برای بک گراند وبلاگم.
من از اونجایی که شروع کرده بود نوشته بود body پاک کردم تا 3 خط پایین ترش که دیگه میرفت برای visited
بعد عکسم رو آپلود کردم و با فرمان body bakground و ادامش ادرس عکسم و no reapet هم نوشتم ولی تنها کاری که کرد حاشیه دوره قالبه وبلاگ به رنگ سفید درومد. از شما میخوام واضح تر بگید من باید اینارو کجا کپی کنم و یا کجا رو پاک کنم و اضافه کنم؟؟؟
و یا اینکه کدوم کد آپلود عکس باید نوشته بشه؟؟؟؟ چون 5 مدل آپلود به من داده برای وبلاگ. ممنون

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

armin

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

سلام من میخوام رنگ پس زمینه ی وبلاگ ام رو عوض کنم ولی هر کاری میکنم نمیشه میشه راهنمایی کنید

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

زهرا

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

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

اگر منظورتان این است که 4 پس زمینه به صورت متناوب و اتفاقی داشته باشیم، ساده نیست، این کار باید با جاوا اسکریپت انجام شود که نیاز به آشنایی با آن و کدنویسی دارد.

hamideh

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

سلام ممنون از اینهمه کمکهاتون
واقعا اطلاعاتتون عالیه
مرسیییییی

H03$e!N

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

سلام
من هر عکسی پس زمینه وبلاگ میزارم یا کوچیکه اگه یه کدی هست که بشه اندازش رو تغییر کرد لطفا بدین ممنون میشم

متاسفانه چنین کدی آنطور که مد نظر شما است در اختیار نداریم!، تنها با CSS می توان تصویر را تکرار کرد (به آموزش های CSS مراجعه کنید).

ƊƠƜƝԼƠƛƊƑαѕтer

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

سلام واقعا عالی بود ممنون از مطلب خوبتون

POORYA

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

سلام
یه خواهشی داشتم میشه لطفا یه طوری بگید که کسانی رو که آشنایی با برنامه نویسی یا زبان اون ندارند بتونند عکس پیش زمینه وبلاگشون رو تغییر بدن؟

متاسفانه خیر، این یک مورد فنی است و راه حل ساده ای برای آن وجود ندارد!

صفحه 3 از 8

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