آموزش CSSآموزش طراحی سایت

جلسه ۱۴ – استایل background در CSS

در ادامه آموزش CSS  در سایت میزفا خدمت شما هستیم. در این پست با دستورات مربوط به استایل css آشنا خواهید شد. توسط دستورات استایل css می توانید ظاهر کلیه عناصری را که در صفحه HTML مورد استفاده قرار داده اید، تغییر دهید. شما می توانید رنگ، نوع و سایز فونت، رنگ یا تصویر پس زمینه و هر آنچه را که مایلید ظاهری مطابق خواسته شما داشته باشد، توسط این دستورات تغییر دهید.

استایل عناصر در CSS

استایل css پس زمینه ها

توسط CSS می‌توانید برای عناصر در صفحات وب پس زمینه قرار دهید. این پس زمینه ها می توانند یک تصویر و یا یک رنگ مورد نظر شما باشند. دستوراتی که در CSS برای کار با پس زمینه ها وجود دارد عبارتند از:

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

استفاده از رنگ برای پس زمینه ( background-color)

توسط این دستور می‌تونید رنگ پس زمینه عنصر مورد نظر خودتون رو تغییر بدید. مثلا پس زمینه یک پاراگراف، جعبه متن، div و یا هر عنصر دیگه ای رو با رنگ دلخواه پر کنید. به عنوان نمونه دستور زیر رنگ پس زمینه کل صفحه رو قرمز می‌کنه:

body {
     background-color:red;
}

شما رنگ مثلا قرمز رو به سه روش می‌تونید با مورد استفاده قرار دهید:

  1. از طریق کد هگزای (کد HEX) رنگ- مانند:
    body {
         background-color: #ff0000;
    }
  2. از طریق کد rgb رنگ – مانند:
    body {
         background-color: rgb(255, 0, 0);
    }
  3. از طریق نام رنگ – مانند
    body {
         background-color: red;
    }

در مثال زیر عناصر h1، p و div دارای پس‌زمینه‌هایی با رنگ‌های متفاوت خواهند بود:

 

h1 {
     background-color:#6495ed;
}

p {
     background-color:#e0ffff;
}

div {
     background-color:#b0c4de;
}

 

استفاده از تصویر برای پس زمینه ( background-image )

توسط این دستور می‌تونید یک عکس دلخواه رو به عنوان پس‌ زمینه عنصر مورد نظر خود در صفحه وب قرار بدید. نحوه استفاده از این دستور به شکل زیر هست:

body {
      background-image:url('paper.gif');
}

در دستور فوق ‘paper.gif’ نام تصویر مورد نظر هست. همیشه در پس‌زمینه متن‌ها از تصاویری استفاده کنین که از خوانایی متن کاسته نشه. به یاد داشته باشین، اگر عکس مورد نظر شما داخل یک فولدر قرار داره، باید نام فولدر هم در پارامتر url ذکر بشه. به عنوان مثال اگه تصاویر مورد استفاده در وب سایت شما، در فولدری به نام images قرار داره، دستور فوق به شکل زیر باید نوشته بشه:

body {
     background-image:url('images/paper.gif');
}

 

تکرار تصویر پس زمینه در محور افقی و عمودی ( Background-repeat )

برای داشتن صفحه‌ای با سرعت بارگزاری بالا، همواره باید حجم صفحه رو پائین نگه دارین. افزودن پس‌زمینه‌هایی با کیفیت بالا، سایز بزرگ و حجیم باعث کاهش شدید سرعت بارگزاری میشه. برای رفع این مشکل، طراحان وب سایت از یک تصویر کوچک با حجم بسیار کم استفاده می‌کنن. تصویری که هر تعداد از اون رو در کنار هم دیگه قرار بدیم، باعث بوجود اومدن تصویری واحد و یکپارچه میشه.

به عنوان مثال توسط تصویر زیر می‌تونیم یک پس‌زمینه برای کل صفحه وب ایجاد کنیم:

 

استایل css
استایل css

 

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

 

body {
     background-image:url('paper.gif');
}

اگه بخوایم تصویر فقط در محور افقی تکرار شود، از دستور زیر استفاده می‌کنیم:

body{
     background-repeat: repeat-x;
}
استایل css
استایل css

 

اگر بخواهیم تصویر فقط در محور عمودی تکرار شود، باید از دستور زیر استفاده کنیم:

body {
     background-repeat: repeat-y;
}
استایل css
استایل css

 

اگر بخوایم تصویر فقط یکبار نشان داده بشه و تکرار نشه، باید از دستور زیر استفاده کنیم:

body { 
      background-repeat:no-repeat; 
}

تعیین موقعیت مکانی تصویر در پس‌زمینه ( background-position )

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

body { 
      background-position: right top;
}

به عنوان مثال توسط مجموعه دستورات زیر، پس زمینه صفحه وب سایت، در سمت چپ و بالای صفحه نشون داده میشه:

body {
     background-image: url('img_tree.png');
     background-repeat: no-repeat;
     background-position: left top;
}

 

ثابت و یا قابل اسکرول بودن تصویر پس‌زمینه ( background-attachment )

شاید وب‌سایت‌هایی رو دیده باشین که هنگامی که صفحه رو برای مطالعه اسکرول می‌کنیم، پس‌زمینه اون ها در جای خودشون ثابت مونده و محتوای اون صفحه حرکت می‌کنه. این کار توسط دستور background-attachment انجام می‌شه:

برای اینکه تصویر با اسکرول کردن صفحه در جای خود ثابت باقی بمونه، از دستور زیر استفاده می‌کنیم:

body { 
      Background-attachment:fixed;
}

برای اینکه تصویر با اسکرول کردن صفحه همراه سایر عناصر حرکت کنه، از دستور زیر استفاده می‌کنیم:

body { 
      Background-attachment:scroll;
}

در جلسات آینده آموزش سی اس اس  به بررسی استایل متن در css می پردازیم.

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

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

نوشته های مشابه

‫32 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. سلام
    من هر چی بکگراند ایمیج در css میزنم مرورگر هیچی نشون نمیده کدها همه درستن

        1. منم این مشکلو داشتم عکس رو با paintویندوز فرمتشو عوض کن و بزار gif.درست میشه

          1. بعیده از فرمت باشه. اصولا jpg و png فرمت هایی هستند که همه جا پشتیبانی میشه.

  2. سلام چطور میتونم رنگ زمینه یک نوشته را تا اخر سطر ادامه بدم

    1. سلام فرهاد جان روز بخیر،
      اگر میخواهی حتما از تگ p برای نوشته هات استفاده کنی. می‌بایست درون تگ های p از یک تگ زیر مجموعه به نام mark استفاده کنی تا بخشی که میخواهی زمینه اش رو با ویژگی background تغییر بدی، تغییر کنه.
      من نمونه هایی از چیزی که فکر میکنم منظورت هست رو داخل لینک زیر برات قرار دادم که شاید به دردت بخوره.‌

      https://jsfiddle.net/ensqkbxz/

      با اینحال اگر بازم من منظورت رو درست متوجه نشدم، حتما بگو که راهنماییت کنم.

      موفق باشی…

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

    1. سلام محدثه. بدون دیدن کدهای شما نمیشه نظر داد. پیشنهاد میکنم کدهاتون رو زیپ کنید و به کسی بفرستید دسترس شما هست.

  4. سلام میخواستم بدونم چطور میشه تصویر شاخص یه پست به صورت اتوماتیک به پس زمینه منتقل بشه که دیگه نخواد دستی آدرس رو در css قرار بدیم مورد مهمیه که هیچ سایتی به اون اشاره نکرده

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

  5. اقا سلام من میخوام روی عکسم یه عنوان بک گراند دار قرار بدم اما میخوام عکس به شکل محو شده یا فرقی نمیکنه پس زمینه عنوانم به شکل محو شده روی عکس نمایش داده بشه باید چی کار کنم؟

  6. سلام ممنون از سایت خوبتون
    میخواستم بپرسم تصویرم رو چند در چند پیکسل انتخاب کنم تا وقتی یوزر اسکرول نکردی غیر اون تصویر چیزی نبینی و این اتفاق توی هر سایز مانیتوری همینطور باشه
    با تشکر

    1. سلام میلاد جان. مثلا نزدیک ۱۲۰۰ px خوبه ولی شما با css مشخص میکنید که کل صفحه رو اون عکس بگیره. البته اگر کاربر موبایل زیاد داره و لپ تاپ کمه میتونید این سایز رو کمتر کنید.

  7. سلام.
    واقعاآموزش عالیه

    فقط مثال های این جلسه بررسی شه. چند مورد جابجایی و کمبود دیدم.

    با تشکر

    1. سلام عرفان جان. یک مشکل تداخلی داشتیم. رفع شد. ممنون که توجه کردی و گزارش دادی 🙂

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

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

    1. سلام دوستم. میتونید یک div بالاتر از بک گراند قرار بدید و برای div پیش زمینه تنظیم کنید و یا از ویژگی هایی مثل :after استفاده کنید. امیدوارم پاسخ من براتون مفید بوده باشه.

      1. سلام مجدد
        بله استفاده از دایو به ذهنم رسیده بود منتها مد نظر بنده نبود چون اونجوری باید تمام پستها ادیت میشدند و تگ دایو رو اضافه میکردم که امکانش نبود . از طرفی هم نمیخواستم از فایل فانکشن و هک استفاده کنم که تصاویر رو داخل دایو بزاره .
        در هر صورت ممنون . و سپاس از شما

        1. سلام. میتونید از تکنیک‌های سی اس اس after و before استفاده کنید. موفق باشید.

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

  10. سلام خسته نباشید ببخشید میشه راهنماییم کنید خیلی ممنون میشم

    من یک قالب دیدم یک عکسی هست و روی عکس یک تار مار موقعه تحرک کردن موس این تار که روی عکس هست حرکت میکنه نمیدونم اسمش چیه که تو گوگل سرچ کنم ایا اموزشش دارید نمونه ببنید

    **
    خواهشن کمک کنید

    1. سلام. اسمش رو دقیق نمیدونم ولی به اینا اصولا canvas میگن یعنی با canvas ساخته میشن و میتونید در سایت codepen.io به دنبال چنین چیزهایی باشید.

  11. باسلام،خیلی ممنون از مطالب خوبتون.
    چجوری میتونیم یک کثلث زیر منو ایجاد کنیم؟

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر