تصاویر پس زمینه (Background Images) در HTML
تصاویر پس زمینه (Background Images) در HTML برای زیباتر کردن صفحات وب استفاده می شوند. این تصاویر می توانند روی هر عنصر HTML اعمال شوند و طراحی جذاب تری ایجاد کنند.
اضافه کردن تصویر پس زمینه به یک عنصر
برای افزودن تصویر پس زمینه به یک عنصر از ویژگی style و خاصیت CSS به نام background-image استفاده کنید.
<p style="background-image: url('img_girl.jpg');">متن نمونه</p>تصویر پس زمینه برای کل صفحه
برای اینکه کل صفحه تصویر پس زمینه داشته باشد، تصویر را روی عنصر <body> اعمال کنید.
<style>
body {
background-image: url('img_girl.jpg');
}
</style>تکرار تصویر پس زمینه
اگر تصویر کوچکتر از عنصر باشد، به صورت پیش فرض افقی و عمودی تکرار می شود. برای جلوگیری از تکرار از background-repeat: no-repeat; استفاده کنید.
<style>
body {
background-image: url('example.jpg');
background-repeat: no-repeat;
}
</style>پوشش کامل (Background Cover)
برای اینکه تصویر کل صفحه یا عنصر را بپوشاند، می توانید از background-size: cover; همراه با background-attachment: fixed; استفاده کنید.
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>کشیدن تصویر (Background Stretch)
برای کشیده شدن تصویر در اندازه کامل عنصر، از background-size: 100% 100%; استفاده کنید.
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>خلاصه فصل
- از ویژگی
background-imageبرای تعیین تصویر پس زمینه استفاده کنید. - ویژگی
background-repeatتکرار تصویر را کنترل می کند. background-size: coverتصویر را به طور کامل نمایش می دهد.background-size: 100% 100%تصویر را کشیده و متناسب با عنصر می کند.
برای ادامه مطالعه به بخش نقشه های تصویر در HTML و تگ picture در HTML مراجعه کنید.