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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:تصاویر(تغییرمسیر از بکگراند در html)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML


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

یک تصویر پس زمینه را می‌توان تقریباً به همهٔ عنصرهای 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 ما را مطالعه کنید


منابع آموزشی