یک تصویر پسزمینه را میتوان تقریباً برای هر عنصر HTML مشخص کرد.
برای افزودن یک تصویر پسزمینه به یک عنصر HTML، از ویژگی style HTML و ویژگی background-image CSS استفاده کنید:
مثال
یک تصویر پسزمینه را به یک عنصر <p> اضافه کنید:
<p style="background-image: url('img_girl.jpg');">
همچنین میتوانید تصویر پسزمینه را در عنصر <style>، در بخش <head> مشخص کنید:
مثال
تصویر پسزمینه را در عنصر <style> مشخص کنید:
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
اگر میخواهید کل صفحه دارای یک تصویر پسزمینه باشد، باید تصویر پسزمینه را روی عنصر <body> مشخص کنید:
مثال
یک تصویر پسزمینه برای کل صفحه اضافه کنید:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
اگر تصویر پسزمینه کوچکتر از عنصر باشد، تصویر به صورت افقی و عمودی تکرار میشود تا به انتهای عنصر برسد:
مثال
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
background-repeat را روی no-repeat تنظیم کنید.مثال
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
اگر میخواهید تصویر پسزمینه کل عنصر را بپوشاند، میتوانید ویژگی 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-size را روی 100% 100% تنظیم کنید:
سعی کنید پنجره مرورگر را تغییر اندازه دهید، و خواهید دید که تصویر کشیده میشود، اما همیشه کل عنصر را پوشش میدهد.
مثال
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
از مثالهای بالا متوجه شدید که تصاویر پسزمینه را میتوان با استفاده از ویژگیهای پسزمینه CSS استایل داد.
برای کسب اطلاعات بیشتر در مورد ویژگیهای پسزمینه CSS، آموزش CSS Background ما را مطالعه کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/