عضویت العربیة English
پیامبر اکرم صلّی الله علیه و آله: نزدیک‌ترین شما به من در روز قیامت، کسانی هستند که در دنیا بیشتر از دیگران بر من صلوات فرستند.

پس زمینه در css

پس زمینه در css
یک شنبه 14 دی 1393  07:39 ب.ظ

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


۱- رنگ پس زمینه
برای نمونه درج رنگ پس زمینه برای زمینه اصلی سایت

body {background-color:#b0c4de;}
#b0c4de
کد رنگی است که میخواهیم در پس زمینه به این رنگ باشد
رنگ پس زمینه را میتوانیم به صورت تعیین کنیم:
کد هکس رنگ مثل: #ccffcc
کد RGB رنگ مثل: rgb(255,0,0)
نام رنگ مثل: red
از دیگر کاربرد های این کد تغییر پس زمینه پاراگراف ، استایل و … هم میباشد:
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
2- تصویر پس زمینه
از طریق کد زیر میتوانیم تصویر پس زمینه مورد نظر را بارگذاری کنیم:
body {background-image:url(‘paper.gif’);}
- تکرار تصویر پس زمینه:
اگر بخواهیم تصاویر تکرار شوند از قطعه کد زیر استفاده میکنیم:
background-repeat:repeat;
اگر بخواهیم تصاویر فقط به صورت افقی تکرار شوند از کد زیر استفاده میکنیم:
background-repeat:repeat-y;
اگر بخواهیم تصاویر فقط به صورت عمودی تکرار شوند از کد زیر استفاده میکنیم:
background-repeat:repeat-x;
اگر بخواهیم تصاویر تکرار نشود از کد زیر استفاده میکنیم:
background-repeat:no-repeat;
- تعیین موقعیت تصویر پس زمینه:
برای تعیین موقعیت تصویر پس زمینه میتوانیم به دلخواه از یکی از کد های زیر استفاده کنیم:
چپ بالا:
background-position:left top;
چپ وسط:
background-position:left center;
چپ پایین:
background-position:left bottom;
راست بالا:
background-position:right top;
راست وسط:
background-position:right center;
راست پایین:
background-position:right bottom;
وسط بالا:
background-position:center top;
مرکز:
background-position:center center;
وسط پایین:
background-position:center bottom;
تعیین بر حسب درصد:
background-position:50% 50%;
تعیین بر حسب فاصله:
background-position:10px 200px;
- حرکت / عدم حرکت تصویر پس زمینه با اسکرول:
در صورتی که بخواهیم تصویر پس زمینه ثابت باشد و با حرکت اسکرول حرکت نکند از کد زیر استفاده میکنیم:
background-attachment:fixed;
و در صورتی که میخواهیم تصویر پس زمینه با حرکت اسکرول حرکت کند از کد زیر استفاده میکنیم:
background-attachment:scroll;
masoomi1371

masoomi1371
کاربر طلایی1
تاریخ عضویت : خرداد 1392 
تعداد پست ها : 716
محل سکونت : آذربایجان شرقی
دسترسی سریع به انجمن ها