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

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

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

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

همانطور که درشکل زیر مشاهده می کنید این پوسته دارای فایل images و style.css می باشد که فایل images ، تمام تصاویر مربوط به پوسته و فایل style.css ، تنظیمات مربوط به ظاهر قالب را در خود نگهداری می کند.

نه تنها این پوسته ساده بلکه تمام پوسته ها دارای فایل images و style.css بوده که قابل ویرایش هستند.
پوشه image قالب Thirteen دارای دو عکس بوده که مربوط به قسمت سربرگ آن می باشد و شما می توانید آن را با فتوشاپ تغییر دهید و یا عکس دیگری را جای آن بگذارید.
نکته!!! فقط به این نکته دقت کنید که تصویر جدید و ویرایش شده ، باید هم اندازه تصویر اصلی بوده و با همان نام تصویر اصلی جایگزین شود.
همانطور که اشاره کردیم فایل style.css تمام اطلاعات مربوط به ظاهر قالب را در خود نگه داری می کند.شکل زیر کدهای درون style.cssپوسته Thirteen را نشان می دهد که می توان با ویرایش آن رنگ سربرگ، پس زمینه و پاورقی آن را تغییر داد وهر گونه تغییرات ظاهری دیگری را در آن ایجاد کرد.

در ادامه به توضیح کامل کار میپردازیم:

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

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

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

http://yoursite.com/upload/images/bg.gif
در صورتی که فایل تصویر در سایت خودتان آپلود شده باشد می توانید از آدرس دهی نسبی نیز استفاده کنید، به فرض:
/upload/images/bg.gif
– در حالت عادی مرورگر تصویر پس زمینه را تا جایی که تمام صفحه را پوشش دهد، در کنار هم به صورت عمودی و افقی تکرار می کند.
– برای دیدن و بررسی رنگ پس زمینه، باید نمایش تصاویر را در مرورگرتان غیر فعال کنید.
برای بدست آوردن کدهای هگز می توانید از برنامه های ویرایشگر کدهای HTML یا برنامه هایی نظیر فتوشاپ استفاده کنید.

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

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

body{
background-color:#999;
background-image:url(bg.gif);
background-repeat:repeat;
}

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

body{
background-color:#999;
background-image:url(bg.gif);
background-repeat:repeat-x;
background-attachment:scroll;
direction:rtl;
}

توضیح:
– مقادیر url را باید با آدرس کامل تصویر خود جایگزین کنید، همان طور که در روش HTML گفته شد، فایل یا باید در یک سایت میزبان فایل آپلود و آدرس URL آن در این قسمت درج شود یا اینکه در سرور سایت شخصی آپلود و آدرس مطلق یا نسبی URL در این قسمت درج شود.

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

کدنویسی اغلب قالب های وب (سایت، وبلاگ و…) به گونه ای است که محتوای استایل CSS به صورت فایل خارجی در صفحه وارد یا به اصطلاح ایمپورت شده اند، لذا در نگاه نخست هیچ خاصیتی برای تعریف یا تغییر background مشاهده نمی کنیم، اما با کمی دقت متوجه خواهیم شد که در واقع کدهای CSS قالب در یک فایل خارجی قرار دارند که با تگ link در HTML به صفحه وب وارد شده اند، به طور مثال:
در اینگونه موارد برای ایجاد تغییرات دلخواه باید آدرس 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، بدون تغییر فایل اصلی، خاصیت های موجود در آن را تغییر دهیم:

.bg-class{
background-color:#999;
background-image:url(bg.gif);
background-repeat:repeat-x;
}

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

background-color
background-image
background-repeat
background-attachment
background-position

خاصیت هر ویژگی

background-color : این خاصیت رنگ پس زمینه یک عنصر را مشخص میکند، برای مثال برای تنظیم رنگ پس زمینه بدنه سایت از کد زیر استفاده میکنیم :
body {background-color:#b0c4de;}
به عبارتی توسط این دستور میتوانید رنگ پس زمینه عنصر مورد نظر خود را تغییر دهید. مثلا پس زمینه یک پاراگراف، جعبه متن، div و یا هر عنصر دیگری را با رنگ دلخواه پر کنید. به عنوان نمونه دستور زیر رنگ پس زمینه کل صفحه را قرمز می کند:
body {
background-color:red
};
شما رنگ مثلا قرمز را به سه روش می توانید با کدهای مختلف مورد استفاده قرار دهید:از طریق کد هگزای رنگ- مانند:
body {
background-color: #ff0000;
}
از طریق کد rgb رنگ – مانند:
body {
background-color: rgb(255, 0, 0);
}
از طریق نام رنگ – مانند
body {
background-color: red;
}
در مثال زیر عناصر h1، p و div دارای پس زمینه هایی با رنگ های متفاوت خواهند بود:
h1 {
background-color:#6495ed
};

p {
background-color:#e0ffff
};

div {
background-color:#b0c4de
};
background-image : با استفاده از این ویژگی تصویر پس زمینه یک عنصر را مشخص میکنیم ،برای مثال برای تنظیم تصویر پس زمینه بدنه سایت از کد زیر استفاده میکنیم :
body {background-image:url(‘paper.gif’);}
به عبارتی توسط این دستور می توانید یک عکس دلخواه را به عنوان پس زمینه عنصر مورد نظر خود در صفحه وب قرار دهید
در دستور فوق ‘paper.gif’ نام تصویر مورد نظر است. همیشه در پس زمینه متن ها از تصاویری استفاده کنید که از خوانایی متن کاسته نشود. به یاد داشته باشید، اگر عکس مورد نظر شما داخل یک فولدر قرار دارد، باید نام فولدر نیز در پارامتر url ذکر شود. به عنوان مثال اگر تصاویر مورد استفاده در وب سایت شما، در فولدری به نام images قرار دارد، دستور فوق به شکل زیر باید نوشته شود
body {
background-image:url(‘images/paper.gif’)
};
background-position : این خاصیت موقعیت یک عنصر را مشخص میکند، که مقادیر آن bottom، center، left ، right و top است.
هنگامی که بخواهیم تصویر در پس زمینه یکبار و بدون تکرار نشان داده شود، باید محل قرارگیری تصویر در یک زمینه بزرگ را تعیین کنید. برای این منظور توسط دستور زیر موقعیت تصویر در پس زمینه را تعیین میکنیم.
background-position: right top;
به عنوان مثال توسط مجموعه دستورات زیر، پس زمینه صفحه وب سایت، در سمت چپ و بالای صفحه نشان داده می شود:
body {
background-image: url(‘img_tree.png’);
background-repeat: no-repeat;
background-position: left top;
}
و برعکس ان تنظیم موقعیت تصویر به گوشه سمت راست – بالا از کد زیر استفاده میکنیم :
body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:top right;

}

این سه خط را میتوان به صورت خلاصه تر نوشت :

body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}
background-repeat : برای داشتن صفحه ای با سرعت بارگزاری بالا، همواره باید حجم صفحه را پائین نگه دارید. افزودن پس زمینه هایی با کیفیت بالا، سایز بزرگ و حجیم باعث کاهش شدید سرعت بارگزاری خواهد شد. برای رفع این مشکل، طراحان وب سایت از یک تصویر کوچک با حجم بسیار کم استفاده میکنند. تصویری که هر تعداد از آن را در کنار یکدیگر قرار دهیم، باعث بوجود آمدن تصویری واحد و یکپارچه خواهد شد.
با استفاده از این ویژگی میتوانیم مشخص کنیم که تصویر چگونه تکرار شود. که می تواند مقادیری از جمله repeat ، repeat-x، repeat-y و no-repeat داشته باشد.توجه داشته باشید که بطور پیش فرض، با نوشتن دستور پس زمینه به شکل زیر، تصویر در هر دو جهت افقی و عمودی تکرار میشود:
body {
background-image:url(‘paper.gif’)
};
اگر میخواهیم تصویر ما به صورت افقی تکرار شود زمانی که خود تصویر نیز افقی است (برای جلوگیری از گذاشتن عکس سایز بزرگ که باعش کند شدن بالا آمدن سایت میشود و به هیچ عنوان در طراحی سایت پیشنهاد نمیشود ) :
body

{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}

زمانی که بخواهیم تصویر فقط یک بار و بدون تکرار نمایش داده شود از دستور زیر استفاده میکنیم :
body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}

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

– background-attachment در CSS قابلیتی است که می توانیم به کمک آن پس زمینه ثابت یا متغیر (اسکرولی) داشته باشیم، مقادیر آن fixed و scroll است شاید وبسایتهایی را دیده باشید که هنگامی که صفحه را برای مطلعه اسکرول میکنیم، پس زمینه آنها در جای خود ثابت مانده و محتوای آن صفحه حرکت میکند. این کار توسط دستور background-attachment انجام می شود
حال برای اینکه بتوانیم تصویر پس زمینه را ثابت انتخاب کنیم از این ویژگی استفاده میکنیم.
body
{
background-image:url(‘smiley.gif’);
background-repeat:no-repeat;
background-attachment:fixed;

برای اینکه تصویر با اسکرول کردن صفحه همراه سایر عناصر حرکت کند، از دستور زیر استفاده میکنیم که البته این همان حالت مقدار پیش فرض یعنی scroll میباشد.
:

Background-attachment:scroll;