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

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

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

تصویر پس‌زمینه در یک عنصر 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 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>

اطلاعات بیشتر در مورد CSS

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

برای کسب اطلاعات بیشتر در مورد ویژگی‌های پس‌زمینه CSS، آموزش CSS Background ما را مطالعه کنید.