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

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

لطفا نظرات خود را در مورد این مطلب با ما درمیان بگذارید.

1- رنگ پس زمینه

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

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;

محمد النصار

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

View Comments

  • براي مشخص كردن رنگش بايد به جاي كالر رنگو بنويسم يا همين كد بدون دستكاري تو ويرايش بذارم؟؟؟؟؟؟

    • body {background-color:#b0c4de;}
      بجای #b0c4de کد هکسی رنگ دلخواهتون رو بنویسید.
      کد هکسی هر رنگی رو میتونید در نرم افزار فتوشاپ مشاهده کنید.

  • ببخشيد در تصوير پيش زمينه كد اول ميذاريم بعد يكي از كدايي كه داديد رو اضافه بر اون گپي ميكنيم؟

    • خواهش میشود :)
      بله کد ها رو اضافه میکنید:
      body
      {
      background-image:url('img_tree.png');
      background-repeat:no-repeat;
      background-position:right top;
      }
      میتونید به صورت خلاصه هم بنویسید:
      مثلا: body {background:#ffffff url('img_tree.png') no-repeat right top;}

    • سلام ، خواهش :)
      برای کسانی که میخواهند شروع کنند شاید کمی سخت تر باشه :)

    • سلام ، نه خلاصه مشکلاتی هم داره
      اینترنت اکسپلور توانایی خواندن حالت خلاصه رو نداره.

  • سلام من کد بک گراند رو عوض می کنم ولی قسمت عنوان ستون ها هم عوض میشه با ید چی کار کنم تا عوض نشه ؟

  • من آدرس css رو پیدا کردم و بعد از تغیر آپلود کردم و بعد در کد قالب جایگزین کردم .

  • متوجه منظورتون نمی شم اگه منظورتون اینه که کدام قسمت کد رو عوض می کنم من فقط قسمت کد رنگ رو مثلا این قسمت رو #e5e2a2 البته از این روش که بالا گفتید استفاده کردم اصلا تغیری نیافت اینو با روش تغیر css انجام می دم . در ضمن ببخشید اگه من متوجه حرفتون نمی شه آخه من خیلی بلد نیستم با کد ها کار کنم .

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

  • سلام، با این کد میشه پس زمینه فیکس گذاشت
    background-attachment:fixed;background:url(../img/site/home.jpg) center no-repeat fixed;
    اگر میخواین یک بک گراند دیگر هم روی این بیاد روشی داره که باید به طراح قالبتون بگین، چون روی هر قالبی با یک روش خاص جواب میده فرق داره....

  • آقای آرش
    امکانش هست روش رو بگین یا راهنمایی کوچولو بکنید چون طراح قالب یکی دیگه است و برای وبلاگ استفاده میکنم. خودم یه جاهایی رو تغییر دادم و طراح قالب رو نمی شناسم
    ممنون میشم راهنمایی کنید

Recent Posts

نکات ضروری برای دانلود ایمن؛ چگونه از ورود به دام سایت‌های مخرب جلوگیری کنیم؟

در دنیای بی‌پایان نرم‌افزارها و فایل‌های دیجیتال، امنیت در دانلود و استفاده از آنها یک…

3 سال ago

معرفی و بررسی سری های لپ تاپ ایسوس

شرکت ایسوس یکی از پیشتازان در صنعت فناوری اطلاعات و الکترونیک است که در زمینه…

3 سال ago

آموزش دستورات پاورشل به همراه فهرست کامل کد های ویندوز پاورشل

آیا شما هم به دنبال کار با کد های پاورشل برای هک هستید؟ در این…

3 سال ago

شغل ادمین اینستاگرام چیست و چگونه ادمین اینستاگرام شویم؟

این روزها که همه افراد به دنبال یک شغل پردرآمد می گردند، مشغول به کار…

3 سال ago

آموزش حل مشکل page isn’t available right now در اینستاگرام

خطای page isn’t available right now یکی از آزار دهنده ترین مشکلاتی است که کاربران…

3 سال ago

ویندوز پاورشل چیست ؟ کاربرد ها و نحوه فعال سازی powershell

ویندوز پاورشل چیست؟ پاورشل ابزاری قدرتمند به حساب می آید که همه افراد علاقه مند…

3 سال ago