استایل پس زمینه (background) در CSS

استایل پس زمینه (background) در 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('img.png');
}

در دستور فوق “img.png” نام تصویر مورد نظر هست. همیشه در پس‌زمینه متن‌ها از تصاویری استفاده کنین که از خوانایی متن کاسته نشود. به یاد داشته باشید، اگر عکس مورد نظر شما داخل یک فولدر قرار دارد، باید نام فولدر هم در پارامتر url ذکر شود. به عنوان مثال اگر تصاویر مورد استفاده در وب سایت شما، در فولدری به نام images قرار دارد، دستور فوق به شکل زیر باید نوشته شود:

body {
     background-image:url('images/img.png');
}

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

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

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

body {
     background-image:url('pattern.png');
}

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

body {
     background-repeat: repeat-x;
}

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

body {
     background-repeat: repeat-y;
}

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

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;
}