تصاویر پس‌زمینه
تصاویر پس‌زمینه
یک تصویر پس زمینه را می‌توان تقریباً به همهٔ عنصرهای HTML اختصاص داد.
برای اضافه‌کردن تصویر پس زمینه در HTML، از خصوصیت سی‌اس‌اس background-image استفاده می‌شود.[۱]
تصویر پس زمینه در یک عنصر HTML
برای اضافه‌کردن تصویر پس زمینه به یک عنصر HTML، می‌توان از ویژگی style استفاده کرد:
مثال
یک تصویر پس زمینه به یک عنصر HTML اضافه می‌کند:
1 <div style="background-image: url('img_girl.jpg');">
همچنین می‌توان تصویر پس زمینه را در عنصر <style> تعیین کرد:
مثال
یک تصویر پس زمینه در عنصر style تخصیص می‌دهد:
1 <style>
2 div {
3 background-image: url('img_girl.jpg');
4 }
5 </style>
تصویر پس زمینه در یک صفحه
اگر می‌خواهید کل صفحه تصویر پس زمینه داشته باشد، باید تصویر پس زمینه را برای عنصر <body> اختصاص دهید:
مثال
یک تصویر پس زمینه برای یک صفحه HTML اختصاص می‌دهد:
1 <style>
2 body {
3 background-image: url('img_girl.jpg');
4 }
5 </style>
تکرار پس زمینه
اگر تصویر پس زمینه از عنصر کوچکتر باشد، تصویر خودش را به صورت افقی و عمودی تکرار می‌کند، تا اینکه به انتهای عنصر برسد.
برای توضیح، ببینید وقتی از یک تصویر کوچک به عنوان پس زمینه در داخل یک عنصر div بزرگ استفاده می‌کنیم، چه اتفاقی می‌افتد:
خصوصیت background-image تلاش می‌کند عنصر div را با تصاویر پر کند تا زمانی که به انتهای آن برسد.
مثال
مثال
1 <style>
2 body {
3 background-image: url('example_img_girl.jpg');
4 }
5 </style>
برای جلوگیری از تکرار تصویر پس زمینه، از خصوصیت background-repeat استفاده می‌شود.
مثال
1 <style>
2 body {
3 background-image: url('example_img_girl.jpg');
4 background-repeat: no-repeat;
5 }
6 </style>
پوشش پس زمینه
اگر می‌خواهید تصویر پس زمینه کل عنصر را پوشش دهد، می‌توانید خصوصیت background-size را برابر با cover. تنظیم کنید.
همچنین، برای اطمینان از اینکه همیشه کل عنصر پوشش داده می‌شود، خصوصیت background-attachment برابر با fixed تنظیم می‌شود:
همان‌طور که می‌بینید، تصویر کل عنصر را بدون کش آمدن، پوشش می‌دهد، تصویر نسبت هاس اولیه‌اش را حفظ می‌کند.
مثال
1 <style>
2 body {
3 background-image: url('img_girl.jpg');
4 background-repeat: no-repeat;
5 background-attachment: fixed;
6 background-size: cover;
7 }
8 </style>
کش آمدن پس زمینه
اگر می‌خواهید تصویر پس زمینه کشیده شود تا متناسب با کل عنصر شود، می‌توانید خصوصیت background-size را برابر با 100% 100% تنظیم کنید:
اندازه پنجره مرورگر را تغییر دهید، و خواهید دید که تصویر کشیده خواهد شد، اما همیشه کل عنصر را پوشش می‌دهد.
مثال
1 <style>
2 body {
3 background-image: url('img_girl.jpg');
4 background-repeat: no-repeat;
5 background-attachment: fixed;
6 background-size: 100% 100%;
7 }
8 </style>
در مورد CSS بیشتر بیاموزید
از مثال‌های بالا آموخته‌اید که تصاویر پیش زمینه را می‌توان با استقاده از خصوصیت‌های پس زمینه CSS استایل دهی کرد.
برای آموزش بیشتر در مورد خصوصیت‌های پس زمینه CSS، آموزش پس زمینه CSS ما را مطالعه کنید
منابع آموزشی