آموزش 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 می پردازیم.

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

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

برچسب ها

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

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

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

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

  1. با سلام خدمت اساتیت محترم
    کادری دارم که با اضافه کردن متن ،کادر از حالت قبلی، سایزش تغییر میکنه
    میخاستم تغییری در سایز کادر ایجاد نشه

    1. سلام میلاد جان ،
      برای اینکار شما باید width و height برای کادر هات مشخص کنی که یک ارتفاع و عرض مشخصی داشته باشند.
      بعد از مشخص کردن این‌ها مطمئنا دیگه مشکلی که گفتی برات پیش نمیاد. فقط این رو بگم برای ریسپانسیو کردن باید نسبت به سایز این ارتفاع و عرض رو تغییر بدی. موفق باشی.

    1. سلام طلوع عزیز، بله میتونی با استفاده از یک گرادینت که تو نظرات هم بهش اشاره کردیم، این کار رو انجام بدی و هم تصویر داشته باشی هم رنگ.

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

    background: url(‘https://…’),rgba(0,0,0,0.2);

    میشه راهنمایی کنید

    1
    1. سلام روز بخیر.
      این مدلی که شما مد نظرتونه رو بهش میگن استفاده از چند بک گراند،‌ متاسفانه نمی‌تونید از rgba به صورت مستقیم استفاده کنید. پیشنهاد من اینه که از linear-gradient به جاش استفاده کنید.

      مثلا کد زیر میتونه جوابتون باشه :

      /* Working method */
      .tinted-image {
        background: 
          /* top, transparent red, faked with gradient */ 
          linear-gradient(
            rgba(255, 0, 0, 0.45), 
            rgba(255, 0, 0, 0.45)
          ),
          /* bottom, image */
          url(image.jpg);
      }
      

      امیدوارم براتون مفید باشه ، موفق باشید.

      1
      1. سلام مرسی.
        ممنونم از پاسختون خیلی دنبالش بودم…
        با آروزی موفقیت برای شما

  3. سلام
    میخام بک گراندهدرسایتم رو عکس بزارم لطفاکمکم کنید ** میشه داخل واتساپ بگین چیکارکنم
    چرامیام نام نویسی کنم داخل سایتتون میگه رمزورودت اشتباه شده

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

      1. سلام
        میشە بکگراند خودمون طراح کنیم و در فیسبوک قسمت color backgrand اضافه کنیم؟

        1. سلام نه نمیشه
          با این حال فیسبوک خودش این امکان اپلود عکس داره

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

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

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

            1
    1. سلام.
      عکستون باید توی پوشه سایتتون باشه یا یه فولدری که کنار فایل html یا php سایتتون قرار داره در نهایتم با css میتونین به این صورت عمل کنید

      #id{background: url(‘images/image.png’);}

      موفق باشید.

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

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

      https://jsfiddle.net/ensqkbxz/

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

      موفق باشی…

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

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

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

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

    2. سلام.
      اگه php بلد باشید خیلی سادس نیاز به یک دیتابیس دارید که ادرس عکس رو داخلش insert یا وارد کنید بعد از اون میتونید احرین رکورد ثبت شده از دیتابیس رو توسط php دریافت کنید و در یک متغیر ذخیره کنید حالا هم میتونین داخل تگ img پست ها از اون متغیر استفاده کنید هم در css بک گراند سایتتون رو روی همون متغیر تنظیم کنید.
      موفق باشید.

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

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

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

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

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

    با تشکر

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

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

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

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

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

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

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

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

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

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

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

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

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

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


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

همچنین ببینید

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

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

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