قرار دادن عکس پس زمینه سایت در CSS

4.3 / 5. تعداد رای: 16

قرار دادن عکس پس زمینه سایت در CSS
قرار دادن عکس پس زمینه سایت در CSS

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

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

عوامل بسیاری بر موفقیت و پیشرفت سایت شما تأثیرگذار هستند که داشتن یک تصویر زمینه خوب یکی از این موارد است. درواقع تصویر می‌تواند جایگزین کلمات زیادی باشد و مفهوم زیادی را به کاربر منتقل کند. اگر می‌‌خواهید یک تصویر مناسب برای تصویر زمینه سایت وردپرسی خود داشته باشید و آن را به‌‌سادگی در سایت خود قرار دهید تا پایان این آموزش با ما همراه باشید.

اول توصیه می‌کنیم این‌کار را انجام ندید!

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

یکی از مواردی که در هنگام قرار دادن تصویر بر سایت خود باید به آن توجه ویژه‌ای داشته باشید حجم تصاویر است. شما باید سعی کنید از تصاویر کم‌حجم استفاده کنید تا سرعت بارگذاری سایتتان با کاهش مواجه نشود.

در نظر داشته باشید که اگر خلاف این کار را انجام دهید و تصویر سایت شما دیر لود شود نتیجه عکس بر روی کاربر و موتورهای جستجو گذاشته‌اید. سرعت لود سایت شما از اهمیت بالایی برخوردار است. زمانی که سرعت سایت شما بالا باشد موتورهای جستجو نیز از کار شما راضی هستند و سایت شما در رتبه‌‌های بالای موتورهای جستجو قرار می‌‌گیرد.

این موضوع حتی بر سئو سایت شما نیز تأثیر دارد. چراکه باعث می‌شود کاربر شور و هیجان بیشتری برای ماندن در سایت شما داشته باشد. پس به‌این‌ترتیب می‌توانید آمار سایت خود را تا حدی بهبود دهید.

اما چرا از تصویر استفاده نکنیم؟! طبیعی است! چون حجم سایت شما حداقل ۱۰۰ کیلوبایت افزایش پیدا خواهد کرد!

حداقل تصاویر بهینه را استفاده کنید!

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

تمام قالب‌های وردپرس از تصویر پس‌زمینه پشتیبانی می‌کنند و شما از هر قالبی که در سایت خود استفاده می‌کنید؛ می‌توانید یک تصویر زمینه برای سایت خود انتخاب کنید. شما می‌توانید به‌واسطه کد نویسی و افزونه‌های مختلفی که در این زمینه وجود دارند به قابلیت این قالب‌ها بیفزایید.

تأثیر تصویر در ذهن کاربران: ۸۸ درصد

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

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

گاهی یک تصویر باکیفیت سبب می‌شود ورودی سایت شما نیز افزایش پیدا کند. چراکه زمانی که کاربر وارد سایت شما می‌شود در همان چند ثانیه ابتدا جذب تصویر شما شده و تصمیم می‌گیرد که از سایت شما استفاده کند.

شما می‌توانید کاری کنید که تمرکز کاربر روی سایت شما بیشتر شده و لحظات بیشتری را در سایت شما سپری کند. درواقع با انجام این کار می‌توانید سایت خود را بهینه‌سازی کنید. با استفاده از به‌کار گیری روش‌های ذکرشده می‌توانید یک تصویر زمینه مناسب برای سایت خود انتخاب کنید.

قرار دادن عکس پس زمینه سایت در CSS

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

ابتدا وارد بخش نمایش > ویرایشگر از پنل مدیریت وردپرس خود شوید.

برای انجام این کار باید کدهای Css را روی Body قالب سایت خود اجرا کنید. پس کد را به‌صورت زیر به استایل قالب که در وردپرس همان Style.css است کپی کنید.

body{
	background:url(آدرس عکس شما) no-repeat;
}

در قسمت آدرس عکس شما باید آدرس تصویر خود را قرار دهید.

درصورتی‌که می‌خواهید تصویر در پس‌زمینه تکرار شود. مثلاً از یک پترن استفاده کرده‌اید؛ No-Repeat را به Repeat تغییر دهید.

یک نکته: شما این امکان را دارید که برای تمام صفحه کردن تصویر کد زیر را به CSS بالا اضافه کنید:

background-size:cover;

به همین راحتی! ?

نکته خاصی هست که این مقاله رو تکمیل‌تر کنه؟

  1. U327461 ۱۲ مرداد ۱۴۰۲

    ممنون بخاطر این مقالۀ خیلی عالی.

  2. کاربر مهمان ۲۱ اسفند ۱۳۹۷

    سلام وقت بخیر ، ممنونم میشم اگر بتونید بفرمایید قالب این سایت ******* چه قالبی هست، ممنون

  3. U18220 ۱۶ بهمن ۱۳۹۷

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

    • Reza Rad رضا راد ۱۶ بهمن ۱۳۹۷

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

  4. کاربر مهمان ۲۳ تیر ۱۳۹۷

    سلام و خسته نباشید… بنده میخوام فقط یک برگه از سایتم** نه همه برگه ها** دارای حالتی شبیه سایت https://www.reyhoon.com بشه … یعنی یک تصویر بکگراند… و روی اون تصویر دو تا لیست باکس برای انتخاب شهر و اینا…میخواستم بدونم دقیقا باید چه کاری انجام بدم ؟

  5. کاربر مهمان ۶ بهمن ۱۳۹۶

    سلام خسته نباشید،ببخشید من تو یه قسمت سایتم به عنوان پس زمینه یه ویدئو قرار دادم اما زمانی که پخش میشه باعث میشه نوشته ها و عکسهای روش خوب دیده نشن،من میخوام یه کاری کنم که اون ویدئو کمی محو بشه انگار متمایل به سفید بشه که اون نوشته ها دیده بشن،چطور این کارو انجام بدم،باید opacity بزارم جایی؟میشه کدی چیزی بهم بگین

    • Reza Rad رضا راد ۶ بهمن ۱۳۹۶

      درود. باید opacity بذارید اگر قالب این امکان رو داره خودش قابلیت opacity هم داره اگر نه باید کدنویسی کنید

      • کاربر مهمان ۶ بهمن ۱۳۹۶

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

        • Reza Rad رضا راد ۶ بهمن ۱۳۹۶

          باید کدنویسی بلد باشید کار چندان آسانی نیست. میتونید از پکیج آموزش طراحی سایت استفاده کنید یا به بخش طراحی سایت بسپارید.

  6. کاربر مهمان ۱۳ خرداد ۱۳۹۶

    با سلامسوال دوم بندهشما برای ای نماد ادرسی که در سایت گذاشتید و ادرسی که به ای نماد دادید یکی بوده؟

  7. کاربر مهمان ۱۳ خرداد ۱۳۹۶

    با سلامبنده این متن را در قالبم کپی کردم و حتی جای body {    margin: 0;} هم گذاشتم اما هیچ تغییری نمی کند لطفا کمک کنید.لطفا سایت بنده را ببینید تا متوجه منظورم بشید. هر کاری می کنم صفحه اصلی تماما سفید است و اصلا هیچ کادری هم نداردfekrkonim.comلطفا به ایمیلم پیام بدید

  8. U4286 ۵ مهر ۱۳۹۵

    سلام ببخشید در من در لوکال هاست این کار رو انجام دادم و درست شد اما در هاست ادرس url رو که وارد میکنم هیچ اتفاقی نمیوفته کلا آدرس url هم اینجا و هم برای فونت عمل نکرد و درواقع  دقیقا نمیدونم آدرس url در هاست چه میشود  ممنون میشم بهم بگید مشکل کارم کجاست؟!