hody.ir

css html background13_Background در css | هودی | آموزشای متنی

13_Background در css

css

با استفاده از css میتوانیم برای عناصر وب پس زمینه قرار بدیم .

این پس زمینه ها میتوانند یک تصویر یا یک رنگ به دلخواه باشند.

دستوراتی که در CSS برای کار با پس زمینه ها وجود دارد عبارتند از:

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

استفاده از رنگ برای پس زمینه ( background-color)

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

body {
     background-color:red;
}

میتوانید به سه روش که جلسه پیش توضیح دادم این رنگ دلخواهتون رو اضافه کنید

دوباره مثال میزنم برای یاد آوری:

از طریق کد هگزای (کد HEX) رنگ- مانند:

body {
     background-color: #ff0000;
}

از طریق کد rgb رنگ – مانند:

body {
     background-color: rgb(255, 0, 0);
}

از طریق نام رنگ – مانند:

body {
     background-color: red;
}

استفاده از تصویر برای پس زمینه ( background-image )در css

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

body {
      background-image:url('hody.img');
}

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

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

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

میتوانیم با استفاده از ( Background-repeat ) در css افقی بودن یا عمودی بودن تصویر زمینه را مشخص کنیم

و همچنین سمت چپ یا راست بودنش را یا اینکه میتوانیم با Background-repeat چند بار یک عکس را تکرار کنیم چندین سایت این کار را انجام داده اند زیرا اینگونه بک گراند سایت سریعتر باز میشود چون حجمش کمتر خواهد بود

ثابت و یا قابل اسکرول بودن تصویر پس‌زمینه ( background-attachment )

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

برای اینکه تصویر با اسکرول کردن صفحه در جای خود ثابت باقی بمونه، از دستور زیر استفاده می‌کنیم:

body { 
      Background-attachment:fixed;
}

برای اینکه تصویر با اسکرول کردن صفحه همراه سایر عناصر حرکت کنه، از دستور زیر استفاده می‌کنیم:

body { 
      Background-attachment:scroll;
}

این جلسه از دوره css هم به پایان رسید امیدوارم جلسه مفیدی بوده باشه در گروه html & css در تلگرام منتظر نظرات شما عزیزان هستم

5 1 vote
Article Rating
Subscribe
اطلاع از
guest
1 دیدگاه
قدیمی ترین
جدیدترین بیشترین آرا
Inline Feedbacks
View all comments
trackback

[…] ها دستورات مختص به خودشون رو در CSS دارا […]