می توان یک تصویر پس زمینه را برای هر عنصر HTML تعیین کرد،یعنی شما می توانید به هر عنصر دلخواه در صفحه، یک تصویر پس زمینه الصاق کنید.
برای افزودن تصویر پس زمینه به عنصر HTML ، از ویژگی HTML style و ویژگی CSS background-image استفاده میکنیم.
صفت background
صفتی است که ما با استفاده از آن میتوانیم یک تصویر/عکس را برای پس زمینه صفحه تنظیم نماییم.
افزودن تصویر پس زمینه به عنصر HTML:
1 |
<div style="background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg');"> |
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<h2>تصویر پس زمینه</h2> <p>:تصویر پس زمینه برای عنصر div</p> <div style="background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg');"> You can specify background images<br> for any visible HTML element.<br> In this example, the background image<br> is specified for a div element.<br> By default, the background-image<br> will repeat itself in the direction(s)<br> where it is smaller than the element<br> where it is specified. (Try resizing the<br> browser window to see how the<br> background image behaves. <br> <br> <br> <br> <br> <br> <br> </div> |
نتیجه:
برای اینکه تصویر پس زمینه تان به سایز دلخواه نشان داده شود میتوانید از ویژگی height و width استفاده کنید.
اما در این مثال از عنصر br یا خطوط اضافه برای تغییر سایز تصویر استفاده شده و هرچه بیشتر از آن یا متن به همراه عنصر br استفاده شود مقدار بیشتری از تصویر
قابل مشاهده میباشد.
برای آشنای با ویژگی عرض و ارتفاع (width و height) میتوانید به آموزش زیر مراجعه کنید:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <style> div { background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg'); } </style> </head> <body> |
اگر می خواهید کل صفحه دارای تصویر پس زمینه باشد ، باید تصویر پس زمینه را در عنصر <body> مشخص کنید:
1 2 3 4 5 |
<style> body { background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg'); } </style> |
مثال:
1 2 3 4 5 6 7 8 |
<style> body { background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg'); } </style> <h2>سلام</h2> <p>ما ارائه دهنده خدمات هاستینگ در آپ وب هستیم</p> |
نتیجه:
برای جلوگیری از تکرار تصویر پس زمینه ، خاصیت تکرار پس زمینه (background-repeat) را روی بدون تکرار (no-repeat) قرار دهید.
مثال:
1 2 3 4 5 6 7 8 9 |
<style> body { background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg'); background-repeat: no-repeat; } </style> <h2>سلام</h2> <p>ما ارائه دهنده خدمات هاستینگ در آپ وب هستیم</p> |
نتیجه:
اگر می خواهید تصویر پس زمینه کل عنصر و صفحه پس زمینه متن را را پوشش دهد ، می توانید ویژگی اندازه پس زمینه (background-size) را برای cover تنظیم کنید.
همچنین ، برای اطمینان از اینکه تمامی عناصر همیشه کاور شده اند ، ویژگی پیوست پس زمینه (background-attachment) را روی fixed تنظیم کنید:
به این ترتیب ، تصویر پس زمینه نسبتهای اولیه خود را حفظ می کند:
مثال:
1 2 3 4 5 6 7 8 9 10 11 |
<style> body { background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } </style> <h2>سلام</h2> <p>ما ارائه دهنده خدمات هاستینگ در آپ وب هستیم</p> |
نتیجه:
کشش تصویر پس زمینه
اگر می خواهید تصویر پس زمینه کشیده شود تا متناسب با کل عنصر باشد ، می توانید ویژگی background-size را تنظیم کنید:
مثال:
1 2 3 4 5 6 7 8 9 10 11 |
<style> body { background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } </style> <h2>سلام</h2> <p>ما ارائه دهنده خدمات هاستینگ در آپ وب هستیم</p> |
نتیجه:
اندازه پنجره مرورگر را تغییر دهید ، خواهید دید که تصویر کشیده می شود ، اما همیشه کل عنصر را می پوشاند.