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

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

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)
نحوه درج علامت های خاص در HTML
نحوه متحرک ساختن متن با تگ marquee در HTML
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟

دیدگاه

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

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

سعید

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

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

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

محمد

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

باسلام
من یه تصویر زمینه کوچیکتر دارم که باید بیاد روی تصویر زمینه بزرگتر قرار بگیره در حالیکه تصویر کوچیک عینا روی تصویر بزرگ باید بگیره! اما چون کد تصویر زمینه اصلی (یعنی تصویر زمینه بزرگ) در بالاتر از کد تصویر زمینه کوچیک قرار داره تصویر کوچیک به زیر تصویر اصلی رفته و پیدا نیست! امکانش هست یجوری به اون تصویر کوچیکتر که کدش در پایین تر قرار داده اولیت بدیم که اول اون نمایش داده بشه و تصویر بزرگتر بره پشت تصویر کوچکتر قرار بگیره؟

راه ساده ای برای این کار وجود ندارد، انجام این مورد نیاز به ویرایش سورس کدهای HTML و CSS دارد، باید از خاصیت هایی مانند position استفاده و بلاک هایی به صورت والد فرزند داشته باشید، مثال:

http://www.corelangs.com/css/box/ontop.html

sara

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

سلام من یه قالب آماده دارم و میخوام برای بخش های مختلف اتوماسیون از رنگ های مختلف استفاده کنم، پروژه هم asp.net mvc هست! شما پیشنهادتون چیه؟ باید مثلا واسه هر رنگ layout مختص رنگ خودشو بزنم یا راه دیگه ای هم هست؟ خود قالب 5-6 تا رنگ واسه پوسته ی داشبورد توی css اش درنظر گرفته مثلا کلاس skin-blue

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

فرشاد

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

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

وبلاگتان بررسی شد، ظاهرا مشکل بر طرف گردیده!

lovelorn

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

سلام دوست عزیز
من توی اینترنت دنبال این مسئله بودم که چطور میشه کد یا دستوری داد (css-html-javascript) که بتونه با هر بار رفرش صفحه وب ، تصویر پیش زمینه رو عوض کنه ولی چیزی پیدا نکردم. به همین دلیل گفتم باید از یک متخصص بپرسم.
به نظر شما اصلا چنین چیزی رو میشه پیاده کرد؟
ممنونم

بدین منظور یا باید از PHP استفاده کنید یا از JavaScript، با توجه به شرح سوال راه حل زیر مناسب است:
ابتدا باید تابع جاوا اسکریپتی داشته باشید که با هر بار رفرش صفحه یک عدد تصادفی ایجاد کند و آن را در نام تصویر جایگزین نمائید، دقت کنید که تصاویر شما باید با نام مشترک و با پسوند یک عدد باشند، به فرض image-1.jpg, image-2.jpg و...

<script type="text/javascript"> 
var total_count = 5;
function changeBG() {
var num = Math.ceil(Math.random() * total_count);
document.body.background = 'http://yoursite.com/images/image-' + num + '.jpg';
document.body.style.backgroundSize = "cover";
}
</script>

در اینجا حداکثر 5 تصویر قابل استفاده است که باید در آدرس فرضی http://yoursite.com/images بارگذاری شده باشند، سپس کافی است تابع فوق را در قسمتی از صفحه خود فراخوانی نمائید:

<script type="text/javascript"> 
changeBG();
</script>

علی احمدی

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

عالی

علی مافی

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

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

همان طور که در آموزش توضیح داده شده، تغییر رنگ پس زمینه نیازمند آشنایی شما با CSS و ویرایش قالب سایتتان است!

رسول

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

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

در صورتی که موبایل شما از امکانات یک مرورگر حرفه ای استفاده می کند، لذا این احتمال وجود دارد که بین نسخه معمولی و نسخه موبایل وبلاگتان تفاوت وجود داشته باشد که این به سرویس دهنده (بلاگ اسکای) برمی گردد، در غیر اینصورت وبلاگتان را در گوشی های با امکانات بهتر تست کنید.

ویولت

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

سلام. من یه سوال داشتم. من هر کاری کردم نتونستم رنگ بالای هر دسته رو عوض کنم. رنگ کلی وبلاگ من مشکیه اما بعضی جاها مثلا بالای هر پست یا امکانات وبلاگ رنگش ابی هست من میخوام رنگ ابی رو تغییر بدم به رنگ بنفش. اما نتونستم.
راهی هست که بشه اونو تغییر داد؟
خیلی ممنون

برای اعمال تغییرات سفارشی در وبلاگ باید با HTML و CSS آشنا باشید و کد قالب وبلاگتان را ویرایش کنید، متاسفانه راه حل ساده ای برای آن وجود ندارد!

sam

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

با سلام خدمت شما دوستان عزیز من وقتی می خوام قالب عوض کنم تصویر مورد نظرم قرار بدم پیام میده استفاده از بعضی از کدها در قالب ممنوعه باید چی کار کنم؟ ممنون میشم راهنمایم کنید

ظاهرا مشکل شما باید مربوط به سایت بلاگفا باشد، در این صورت متاسفانه کار خاصی نمی توان کرد جزء اینکه از کدهایی استفاده نمائید که بلاگفا با سایت ارائه کننده آنها مشکلی نداشته باشد!

مهسا

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

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

http://persianblog.ir./my pictures/imag/vocaloid/miku111/bg.gif

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

اینها مسائلی است که باید به تدریج و با مطالعه مبانی وب و وبلاگ نویسی فرا گرفته شوند، به طور مثال اگر هدف شما صرفا به دست آوردن آدرس URL تصویر است، تنها اشتباه آدرس بالا وجود نقطه بعد از ir است که اضافه است! اما اگر هدف درج و نمایش یک تصویر در صفحات وب است، باید با تگ img در HTML آشنا باشید که آموزش آن در وب وجود دارد، برای درج آهنگ نیز کافی است عبارت "نحوه درج آهنگ و موسیقی پس زمینه در وبلاگ" را در گوگل جستجو نمائید!

هانیه

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

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

باید حداقل آشنایی با CSS داشته باشید، موارد لازم در آموزش گفته شده، در صورت عدم آشنایی شما با CSS، راهنمایی بیشتری نمی توان کرد!

masood

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

سلام خسته نباشید
میخواستم بدونم تنظیم :

direction:rtl

یعنی چی؟ چه کاری انجام میده؟
ممنون بابت آموزش هاتون

این خاصیت از راست به چپ بودن متن را مشخص می کند، در واقع rtl مخفف Right To Left است (ltr از چپ به راست)!

عباسی

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

سلام اگه بخوایم توی کد های html یک کلمه از کدها رو سرچ کنیم چیکار باید کنیم؟

سوالتان مبهم است! اگر منظور صرفا پیدا کردن یک کلمه است، می توانید با قابلیت Find موجود در مرورگرها (معمولا قسمت Menu یا Option) این کار را انجام دهید!

parhamLinker

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

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

در صورت آشنایی با مفهوم Class در CSS می توانید کلاسی که مطالب در آنها نمایش داده می شوند را در استایل (کد قالب) خود ویرایش نمائید، طبق بررسی اجمالی وبلاگتان، دو کلاس content و post-part در این امر دخیل هستند.

صفحه 2 از 8

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