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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

background-size:cover;

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

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...