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

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

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

قبلی »

« بعدی

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

دیدگاه

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

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

نور

۲۱:۲۴ ۱۴۰۱/۱۱/۰۴

سلام
این کد ابتدای وبلاگه منه چطور میتونم به آدرس لینکی که توش میشه تغییرات کد رنگ ها رو انجام داد دسترسی پیدا کنم؟

<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->" />
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/dist/font-face.css">

باید href فایل اصلی استایل CSS قالب را پیدا کنید، در قسمتی که درج کرده اید ظاهرا فقط آدرس URL استایل مربوط به تنظیمات فونت صفحه وجود دارد، استایل های بعدی را بررسی کنید.

پـــرتو

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

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

تا آخر وقت امروز بررسی می کنیم، نتیجه به ایمیلتان ارسال می شود.

پـــرتو

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

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

قالب ویرایش و نتیجه به ایمیلتان ارسال شد.

محمود

۲۰:۲۵ ۱۴۰۰/۰۴/۱۴

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

<a href="#" onclick="setPoliceAlarm(true);">Play</a>

را درج می کنم . بعد از برگشت از ویرایشگر متنی به دیداری یا انتشار آن ، رویداد onclick حذف میشود. یعنی تگ

<a href="#" onclick="setPoliceAlarm(true);">Play</a>

به

<a href="#" >Play</a>

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

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

https://wordpress.org/plugins/raw-html/

هم اینکه به لینک مد نظر یک آی دی یکتا نسبت دهید به فرض:

<a id="onclick-event-1" href="#">Play</a>

و در انتهای کد قالب سایت اسکریپت زیر را درج کنید:

<script>
var alarm_element = document.getElementById("onclick-event-1");
if(typeof(alarm_element) != 'undefined' && alarm_element != null){
    alarm_element.onclick = function() {setPoliceAlarm(true);};
};
</script>

محمود

۱۱:۴۵ ۱۴۰۰/۰۴/۱۱

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

برای ایجاد افکت پس زمینه چراغ پلیس و پخش صدا می توانید از نمونه کد زیر استفاده کنید:

<script>
var bg_color = 'red';
var alarm_loop = 0;
function setPoliceAlarm(is_play){
    if(is_play){
	    var audio = new Audio('http://example.com/path/to/audio-file.mp3');
		audio.play();
		alarm_loop = 0;
	}
	
	if(bg_color == 'red'){
	    bg_color = 'blue';
	} else {
	   	bg_color = 'red';
	}
	
	document.body.style.background = bg_color;
	
	if(alarm_loop < 10){
	    window.setTimeout("setPoliceAlarm(false);", 100);
		alarm_loop++;
	}
}
</script>
<a href="#" onclick="setPoliceAlarm(true);">Play</a>

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

http://example.com/path/to/audio-file.mp3

دقت کنید لینک حتما مستقیم باشد (با درج آدرس در مرورگر فایل بلافاصله دانلود یا پخش شود و به صفحه دیگر ارجاع داده نشود).

Amin Eskandari

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

سلام
عالی بود ممنون

ainaz

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

سلام من در صفحم عکس گذاشتم ولی عکسم تیکه تیکه افتاده باید چکار کنم

لطفا آدرس صفحه را جهت بررسی درج کنید.

stopmusic

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

ممنون عالی بود

milad amirian

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

عالی بود

محمد

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

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

<div style="background-image:url(http://file.mihanblog.com//public/user_data/user_files/384/1151477/background.jpg);"></div>

ممنون می شم راهنمایی کنید
البته تو این css فکر کنم تصویر بک گراند و هدر یکی باشد
آیا تنظیم خاصی باید انجام بدم؟
این هم آدرس css

http://mihanblog.com/public/public/user_data/template/2099942/style.css

ممنون می شم راهنمایی کنید.
تشکر

استایلی که برای تگ div در نظر گرفته اید از نظر برنامه نویسی اشکالی ندارد اما این کد صرفا پس زمینه همان div را مشخص می کند نه پس زمینه کل قالب را، برای تغییر پس زمینه کل قالب استایل زیر را قبل از بسته شدن تگ head در قالب کپی کنید:

<style type="text/css">
.div2 {
	background: url(mytheme.ir_01.jpg) no-repeat;
}
</style>

به جای mytheme.ir_01.jpg آدرس URL تصویر جدید را قرار دهید.

یعقوب الهیاری

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

سلام عکس رو عوض میکنم. دو تا مشکل دارم
۱ عکس با زمینه فیت نمیشه
۲ رنگش تارتر از خود عکس هستش.
ممنون میشم بهم پاسخ بدید

وبلاگتان بررسی شد، ایراد خاصی در تصویر پس زمینه دیده نمی شود؟! در صورت تمایل لطفا یک اسکرین شات از مشکل تهیه کنید.

علیرضا

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

سلام. می خوام فونت عنوان وبلاگم رو به B Kamran تغییر بدم. اگه میشه کدش رو بهم بگید

تا آنجا که اطلاع داریم متاسفانه در حال حاضر استفاده از فونت دلخواه در وبلاگ (به جهت محدودیت های فنی و بحث Same-origin Policy) به سادگی ممکن نیست مگر اینکه خود سرویس دهنده چنین امکانی را در نظر بگیرد.

آرش

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

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

لطفا آدرس وبلاگ را جهت بررسی درج کنید، ممکن است مشکل از Cache شدن صفحه باشد، برای اطمینان در مرورگرها و سیستم های مختلف وبلاگ را تست کنید، در مرورگر دکمه Ctrl + F5 را با هم فشار دهید.

قندهاری

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

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

برای این کار باید ترکیبی از کدنویسی جاوا اسکریپت و CSS را با هم استفاده کنید، لطفا به این لینک ها مراجعه بفرمائید:

http://www.codebelly.com/javascript/backimagechange.html

https://www.xul.fr/en/dom/dynamic-images.php

https://www.webdeveloper.com/forum/d/235623-changing-background-image-with-a-button

بهارناز

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

سلام. ممنون بابت سایت بسیار عالیتون و اینکه وقت میذارید برای جواب دادن به سوالات. من تازه شروع کردم برای یادگیری html , css فعلا از سایت شما آموزش های مقدماتی را مطالعه و تا حدی تمرین کردم. برای طراحی سایت به صورت حرفه ای میشه راهنماییم کنید به ترتیب چه آموزش هایی را ببینم ؟ فتوشاپ هم کامل بلدم و اینو میخواستم بدونم اول آموزش های کاربردی html, css را یاد بگیرم یا مقدماتی جاوا اسکریپت؟

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

نخست

قبلی

بعدی

آخر

صفحه 1 از 8

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