آموزش تصویر پس زمینه در HTML

Ratings
(0)

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

برای اضافه کردن یک تصویر پس زمینه در HTML، از ویژگی background-image در CSS استفاده کنید.

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

برای اضافه کردن یک تصویر پس زمینه برای یک عنصر HTML، می توانید از خصوصیت style استفاده کنید:

مثال شماره 1

اضافه کردن یک تصویر پس زمینه به یک عنصر HTML:

<div style="background-image: url('/other/img_girl.jpg');">
امتحان کنید

شما همچنین می توانید تصویر پس زمینه را در عنصر <style> مشخص کنید:

مثال شماره 2

مشخص کردن تصویر پس زمینه در عنصر <style> :

<style>
div {
  background-image: url('other/img_girl.jpg');
}
</style>
امتحان کنید

استفاده از یک تصویر پس زمینه برای یک صفحه

اگر بخواهیم برای تمامِ یک صفحه، یک تصویر پس زمینه داشته باشیم، می توانیم برای عنصر <body> یک تصویر پس زمینه را مشخص کنیم:

مثال شماره 3

اضافه کردن یک تصویر پس زمینه برای یک صفحه ی HTML:

<style>
body {
  background-image: url('other/img_girl.jpg');
}
</style>
امتحان کنید

تکرار تصویر پس زمینه

اگر تصویر پس زمینه کوچکتر از عنصر مورد نظر باشد، تصویر به صورت افقی و عمودی تکرار می شود، تا زمانی که عنصر کاملاً پوشانده شود. برای توضیح بیشتر، باید ببینیم که وقتی از یک تصویر پس زمینه کوچک در درون یک عنصر div بزرگ استفاده می کنیم، چه اتفاقی می افتد:

 ویژگی background-image سعی می کند این عنصر div را با استفاده از تصاویر پُر کند تا زمانی که به انتها برسد.

مثال شماره 4

<style>
body {
  background-image: url('other/img_girl.jpg');
}
</style>
امتحان کنید

برای اجتناب از اینکه تصویر پس زمینه خودش تکرار شود، می توانید از ویژگی background-repeat استفاده کنید.

مثال شماره 5

<style>
body {
  background-image: url('other/img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
امتحان کنید

کاور یا پوشش پس زمینه در html

اگر بخواهیم تصویر پس زمینه ی ما، تمام عنصری که در آن تعریف شده است را پوشش دهد(کاور کند) می توانیم ویژگی background-size را برابر با cover قرار دهیم. همچنین برای اینکه اطمینان پیدا کنیم که تمام عنصر مورد نظر همواره پوشش داده می شود، ویژگی background-attachment را برابر با fixed قرار می دهیم.

همان طور که مشاهده می کنید، تصویر ما تمام عنصر مورد نظر را پوشش داده است و  کشیدگی(stretching) در آن وجود ندارد، و این تصویر نسبت و تناسب اصلی خود را حفظ می کند.

مثال شماره 6

<style>
body {
  background-image: url('other/img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
امتحان کنید

کشش تصویر پس زمینه

اگر بخواهید تصویر پس زمینه کشیده شود، تا تصویر کاملا در عنصر مورد نظر جا شود، می توانید ویژگی background-size را برابر با 100% 100% قرار دهید.

 

سعی کنید پنجره مرورگر را تغییر اندازه دهید و خواهید دید که این تصویر کشیده می شود اما همواره تمامِ عنصر مورد نظر را پوشش می دهد.

مثال شماره 7

<style>
body {
  background-image: url('other/img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>
امتحان کنید

یادگیری بیشتر CSS

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

  • بازدید: 633

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال