استایل css برای پس زمینه ها(background):

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

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

Background Color

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

body {
   background-color: blue;
}

به طور مثال شما می توانید رنگ مثلا آبی را به سه روش با کدهای مختلف مورد استفاده قرار دهید:

body {
   background-color: blue;
}
body {
   background-color: #0000ff;
}
body {
   background-color: rgb(0, 0, 255);
}

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

h1 {
   background-color: green;
}
div {
   background-color: lightblue;
}
p {
   background-color: yellow;
}

CSS background-color example!

This is a text inside a div element.

This paragraph has its own background color.

We are still in the div element.

Background Image

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

body {
   background-image: url("body-bg.jpg");
}

نکته: هنگام استفاده از یک تصویر پس زمینه، باید از یک تصویری استفاده کنید که متن را مختل نکند(رنگ متن در پس زمینه محو نشود).

background repeat

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

اشتباهات معمول در طراحی وب
شاید این مطلب را نیز بپسندید

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

background-repeat

اگربخواهیم تصویر بالا فقط در محور افقی تکرار شود دستور(;background-repeat: repeat-x) و اگربخواهیم تصویر بالا فقط در محور عمودی تکرار شود دستور(;background-repeat: repeat-x) را استفاده می کنیم و اگر بخواهیم تصویر فقط یکبار نشان داده شود و تکرار نشود، باید از دستور (;background-repeat: no-repeat) استفاده کنیم.

background position

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

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

background attachment

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

برای تعیین اینکه تصویر پس زمینه ثابت باشد (با بقیه صفحه حرکت نکند)، از ویژگی background-attachment با مقدار fixed استفاده کنید:

body {
   background-image: url("body-bg.png");
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: fixed;
}

برای کوتاه کردن کد، می توانید تمام خواص پس زمینه را در یک خط بنویسید. این یک ویژگی shorthand نامیده می شود.

body {
   background: #ffffff url("img_tree.png") no-repeat right top;
}
آموزش CSS (بخش چهارم)