تنظیمات تصویر پس زمینه در css در css با ویژگی background-image می توانید یک پس زمینه برای عناصر html تعریف کنید.

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

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

برای این کار باید کد css را برای بخش body فایل html تعریف کنید.

خواص پس زمینه CSS برای تعریف جلوه های پس زمینه برای عناصر استفاده می شود.

خواص پس زمینه در CSS:

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

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

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

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

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

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

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

سرعت لود سایت شما از اهمیت بالایی برخوردار است.

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

این موضوع حتی بر سئو سایت شما نیز تأثیر دارد.

چراکه باعث می‌شود کاربر شور و هیجان بیشتری برای ماندن در سایت شما داشته باشد.

پس به‌این‌ترتیب می‌توانید آمار سایت خود را تا حدی بهبود دهید.

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

 برای انجام این کار شما نیازی ندارید که افزونه خاصی را نصب و راه‌اندازی کنید.

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

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

برای انجام این کار باید کدهای Css را روی Body قالب سایت خود اجرا کنید.

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

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

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

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

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

background-size:cover;