در این مقاله برای شما نحوی درج پس زمینه در صفحات وب رو از طریق سی اس اس آموزش میدهیم .
در این مطلب نحوی قرار دادن رنگ و قرار دادن تصویر برای پس زمینه رو به شما آموزش میدهم . اگر در قسمتی به مشکل خوردید ، مشکلتان را با ما مطرح کنید تا آن را برطرف کنیم. امیدوارم این آموزش بخشی از نیاز های شما دوستان رو برطرف کنه .
۱- رنگ پس زمینه
برای نمونه درج رنگ پس زمینه برای زمینه اصلی سایت
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;
