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

استایل css
استایل 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 می پردازیم.

پایان ترم

[box type=”info” class=”question-from-users” width=””]

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

مقالات قبل به صورت مستقل نیاز به پایان ترم نداشتن، اما اگه مطالب مقالات قبل رو یادتون نیست، پیشنهاد می‌کنم که مجددا یه مروری بر اون ها داشته باشین که از پس این بخش بر بیاین 🙂

و حالا سوال:

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

background-cssو به عنوان منابع مورد نیاز، تصویر پس زمینه زیر رو بهتون دادن:

از کدوم دو خاصیت ذکر شده تو این مقاله، برای توسعه پس زمینه مورد نظر استفاده می‌کنین؟

نکته: تصویر پس زمینه یه مقدار از تصویر داده شده تاریک تره. این مسئله با linear-gradient انجام میشه که در این سوال بهش کار نداریم، اون رو نادیده بگیرین.

نکته: لوگوی میزفا در بالا سمت چپ پس زمینه، جزء پس زمینه نیست! اون هم نادیده بگیرین.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

در این مقاله، خاصیت های اصلی برای تعریف تصاویر پس زمینه رو با هم بررسی کردیم.

دیدیم که می‌تونیم توسط خاصیت background-color و background-image، برای عناصرمون، به ترتیب رنگ و تصویر پس زمینه تعریف کنیم.

خاصیت های زیر، نقش خاصیت های کمکی رو برای ما بازی می‌کردن:

  • background-repeat: تکرار تصویر پس زمینه در راستا های مختلف صفحه
  • background-position: تعیین موقعیت تصویر پس زمینه نسبت به صفحه
  • background-attachment: تعیین ثابت بودن و یا متحرک بودن تصویر پس زمینه در حالت اسکرول شدن صفحه

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

100 نظر

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

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