آموزش 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. از طریق کد هگزای رنگ- مانند:
    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');
}
استایل css
استایل css

 

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

 

استایل 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 می پردازیم ، با ما همراه باشید.

استایل background در CSS
امتیاز 3.8 از 5 رای
برچسب ها

پوریا آریافر

اولین کسب و کار آنلاین خودم را در فیسبوک راه‌اندازی کردم و در سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال را داشتم. سپس وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت را دریافت کردم، در دوران خدمت سربازی مسئول بهینه سازی یک وبسایت خبری معتبر شدم و آشنایی با سئو را آموختم و در سال ۲۰۱۴ توانستم به رتبه ۴۰۰ الکسا نزدیک کنم. برخلاف میل درونی، وارد دانشگاه شدم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، در همان سال بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو را داشتم، که فروختم تا بتوانم تمرکز را فقط بر روی سئو بگذارم، فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌می‌گیرد، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کرده‌ام. در همه ابزارهای گوگل به جز adwords تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری را یادگیری و یاددادن می‌دانم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شده، می‌تواند چنین بستر مناسبی را فراهم کند. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم ...

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

‫19 نظرها

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

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

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

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

    با تشکر

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

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

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

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

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

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

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

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

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

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

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

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

دیدگاهتان را بنویسید

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

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

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

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