بهینه سازی وب سایتتجارت الکترونیک

پس زمینه در css

طراحی وب

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

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

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

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

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

body {background-color:#b0c4de;}

#b0c4de

کد رنگی است که میخواهیم در پس زمینه به این رنگ باشد

رنگ پس زمینه را میتوانیم به صورت تعیین کنیم:

کد هکس رنگ مثل:  #ccffcc

کد RGB رنگ مثل: rgb(255,0,0)

نام رنگ مثل: red

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

h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

div {background-color:#b0c4de;}

۲- تصویر پس زمینه

از طریق کد زیر میتوانیم تصویر پس زمینه مورد نظر را بارگذاری کنیم:

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;

گفتگو ها
    فاطمه

    برای مشخص کردن رنگش باید به جای کالر رنگو بنویسم یا همین کد بدون دستکاری تو ویرایش بذارم؟؟؟؟؟؟

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

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

    سلام
    این قابل رو دانلود کنید (مثلا با IDM) بعد با نوت پد بازش کنید.
    http://www.samenblog.com/uploads/a/azubargh/87682.css
    سپس این کد رو درجای مناسب قرار بدید:
    body.
    {
    background-attachment:fixed;background:url(../img/site/home.jpg) center no-repeat fixed;
    }
    بعد در یک هاستی (فضا) آپلود کنید (آپلود سنترها نه) مثلا در پرشین گیگ. بعد آدرس این فایل رو به صورت زیر در کد قالب خود (کد HTML) قرار بدین. اینجوری:
    به دلیل حذف شدن خود به خود کد مجبور شدم عکس بدم برای مشاهد کد اینجا کلیک کنید.
    »»» توجه کنید که در کد بالا تمامی ستاره هارو حذف کنید«««
    مشکلی بود همینجا بگین بازم

    نمیشه آقای آرش فقط یکی رو میندازه

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

    شما یه چیزی بگی من رو هوا میزنم-ترفندتو بگی با این حال که چیزی در موردش نخوندم ولی از روی تجربه میگیرم چی میگی

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

    سلام

    چجوری می تونیم تصویری رو برای پسزمینه قرار بدیم و متن رو روی تصویر بزاریم؟

    mohammad

    سلام

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

    background-size:cover ;

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

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

    مهسا

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

    سلام

    مطلب عالی بود ممنون