سه شنبه ۲۸ دی ۱۴۰۰

Tuesday, January 18, 2022 GMT +3:30

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

html-background

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

آشنایی با 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
related مطالب بیشتر:
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
کاربرد متاتگ refresh در صفحات وب (HTML)
دیدگاه
more ۱۰۶ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
نویسنده: پـــرتو
۲۲:۴۲ ۱۴۰۰/۰۹/۲۷
خیلی ممنون فقط تنها ایراد دیگه ای داره اینک پس زمینه پست ها با منوی سمت راست یکی میشه یعنی می خام پس زمینه پست ها یه رنگ دیگ مثلا سفید باشه و پشتش یه رنگ دیگ ممنون میشم اینم درست کنید ممنونم خیلی خوب شد یعنی درست شد فقط همین یه ایراد و داره
پاسخ: 
تا آخر وقت امروز بررسی می کنیم، نتیجه به ایمیلتان ارسال می شود.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده می شود.
- کدها و اسکریپت های طولانی را در یک صفحه وب آنلاین قرار دهید تا امکان بررسی دقیق و خطایابی میسر باشد.
- ممکن است پاسخ سوالتان نیاز به کدنویسی داشته باشد، در این موارد مدت زمان بیشتری برای پاسخگویی مورد نیاز است.
- تمام دیدگاه ها خوانده شده و زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا تا هنگام انتشار دیدگاه شکیبا باشید.



 refresh
10 × 10
4 × 6
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
رضا
در:
سلام وقت بخیر. ببخشید من اشتباهی حلقه بینهایت رو اجرا کردم و کلی برای خودش ادامه داد و من به زور مرورگر رو بستم میخواستم...
۱۴۰۰/۱۰/۲۸

Fatemeh
در:
وقت بخیر مشکل این کد چیه ؟اجرا نمیشه
۱۴۰۰/۱۰/۲۸

Fatemeh
در:
سلام خسته نباشید مشکل این تیکه کد چیه؟ كدي بنويسيد كه اسامی افراد را تک تک خوانده و نهايتا همه آنها را روي صفحه...
۱۴۰۰/۱۰/۲۸

Bahar
در:
سلام ،کدام لیست ترتیب قرارگیری انها اهمیت نداره؟ ازبین اینها؟
۱۴۰۰/۱۰/۲۷

حدیثه یدی
در:
سلام خسته نباشید ، خیلی وبلاگ خوبی دارید، مطالبتون واقعا مفید بود .. من یک سوالی داشتم می‌خوام برای وبلاگم فونت های مختلف پیدا کنم...
۱۴۰۰/۱۰/۲۶

Fatemeh
در:
سلام چه طوری داخل این کادرهای که ایجاد میشه با این کد متن txt1, txt2 ,... نوشته شود؟
۱۴۰۰/۱۰/۲۵

Fatemeh
در:
سلام وقت بخیر چطوری میتونم موارد زیر رو انجام بدم؟! میشه کمک کنید ممنون! پوسته تارنمای فروشگاه آنالین لوازم خانگی را به صورت زیر...
۱۴۰۰/۱۰/۲۵

سپیده
در:
سلام مجدد لینک صفحه خدمت شما ممنون میشم راهنمایی کنید کدی که توی پیام قبلی ارسال کردین رو کجا باید بگذارم؟
۱۴۰۰/۱۰/۲۳

سپیده
در:
سلام و درود سایتم وردپرس هست و با المنتور طراحی کردم توی صفحه ویرایش حساب کاربران، میخوام فیلد تغییر آدرس ایمیل رو حذف کنم....
۱۴۰۰/۱۰/۲۲

حسین
در:
سلام ببخشید یک سوال داشتم چجوری میشه با زدن یک دکمه کمی بالاتر یا پایین تر برود یا با زدن نوشته ای...
۱۴۰۰/۱۰/۲۲

سپهر
در:
سلام استاد ضمن تشکر از آموزش خوب شما عرض شود بنده دارم یک ربات چت ساده می‌سازم که در بانک اطلاعات خود دو ستون...
۱۴۰۰/۱۰/۲۱

Fatemeh
در:
سلام روز بخیر این کد مشکلش چیه؟!
۱۴۰۰/۱۰/۱۹

پـــرتو
در:
سلام خسته نباشید ببخشید مزاحم میشم من قالبی ک بهتون دادم یادتون میاد؟کدش رو دارین؟میشه براش لطفا اگه میشه عنوان بزارین؟چون عنوان نداره ممنون...
۱۴۰۰/۱۰/۱۷

مهلا
در:
من یه تکه کدی نوشتم با زبان php که 9 عکس دادم با سه سطر و ستون می‌خوام در خروجی این عکسها بطور تصادفی...
۱۴۰۰/۱۰/۱۵

امیرحسین
در:
سلام وقت بخیر بنده یه سوال خیلی مهمی داشتم که اگر کمک کنید و راهکاری به من بدید سوالم اینه که من دارم یه ربات...
۱۴۰۰/۱۰/۱۴

وحید
در:
سلام خسته نباشید و ممنون از شما من میخواستم بدونم چطوری میشود فیلم های طولانی در وبلاگ بگذاریم ممنون
۱۴۰۰/۱۰/۱۴

Fatemeh
در:
وقت بخیر متاسفانه من هر کدی مینویسم یه اشکالی داره این کد مشکلش چیه؟🤦🏻‍♀️
۱۴۰۰/۱۰/۱۲

نازنین
در:
اسکریپتی بنویسید که نام و نام خانوادگی و سال تولد شخص را دریافت کرده، علاوه بر نمایش نام و‌ نام خانوادگی در مرورگر، سن فرد...
۱۴۰۰/۱۰/۱۲

عباس صلاحی
در:
با سلام خدمت شما و تشکر از سایت خوبتون بنده یک table درام که سه ستون در کنار هم داره می خوام که وقتی...
۱۴۰۰/۱۰/۱۲

Fatemeh
در:
سلام وقت بخیر خسته نباشید این تیکه کد با دستور if چه مشکلی داره!؟
۱۴۰۰/۱۰/۱۲

بابایی
در:
سلام وقت بخیر این آدرس یکی از مقالاتی هست که داخل سایت گذاشتم میخوام یه تغییری بدم که این اعداد وسط لینک آدرس نباشه...
۱۴۰۰/۱۰/۱۲

elahe
در:
سلام وقتتون بخیر من در جدول پایگاه داده کتابخانه 4 تا ستون دارم که میخوام هر فیلد رو در یک لیبل بریزم در واقعه یک...
۱۴۰۰/۱۰/۱۲

m.b
در:
سلام مجدد تشکر بابت راهنمایی من یک مشکل دیگه برام بوجود آمد و اون اینکه بعد از ارسال اطلاعت به صفحه questions.php بر...
۱۴۰۰/۱۰/۱۱

m.b
در:
سلام من یک فرم طراحی کردم جهت ارسال سوال با صفحه questions.php با متد post به صفحه dbquestions.php ارسال میشود. این نمونه کد های...
۱۴۰۰/۱۰/۱۱

m.b
در:
با سلام ضمن تشکر از وب سایت خوبتان من مطابق کدهای شما عمل کردم و تمامی کدها رو کپی کردم و...
۱۴۰۰/۱۰/۱۱

fateme
در:
سلام ممنون از سایت خوبتون من سوالم اینه که چجوری داخل منو که با li هست لینک بزاریم تگه لطف کنید بگید ممنون میشم
۱۴۰۰/۱۰/۱۱

مهلا
در:
میخام با php دو تا عدد بنویسم که اگه عدد اول بزرگتر بود 5 بار چاپ کنه که عدد اول بزرگتراست. ممنون میشم جواب بدید...
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
ممنون از پاسخگویی مشکل این یکی کد چیه ؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر مشکل این کد چیه اجرا نمیشه؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر چطوری میتونم یه کد با prompt.window بنویسم که هنگام باز شدن صفحه وب یک عدد از کاربر بگیره و رقم...
۱۴۰۰/۱۰/۱۰

zahra
در:
سلام وقتتون بخیر باشه من میخام از 1 تا 30 روز و برام چاپ کنه یعنی اگر ماه 31 روز بود 1 تا 31 را...
۱۴۰۰/۱۰/۰۸

پوریا
در:
سلام url سایت که گفتم بعد از نصب پلاگین دچار مشکل شد:
۱۴۰۰/۱۰/۰۵

پوریا
در:
سلام وقتتون بخیر اساتید محترم من پلاگین مرغ مگسخوار hummingbird رو روی سایتم نصب کردم (قالب استودیار) و دیدم که پولی شده و هیچیش...
۱۴۰۰/۱۰/۰۴

کیوان عباسپور
در:
سلام ممنون از سایت خوبتان متاسفانه ایمیل های ارسالی اسپم شناسایی میشن واسه رفع این مشکل چیکار کنم منظورم اینه که ایمیل ها...
۱۴۰۰/۱۰/۰۱
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.