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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial‏ | تصاویر(تغییرمسیر از بک گراند در HTM)
پرش به ناوبری پرش به جستجو

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

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





برای اضافه‌کردن تصویر پس زمینه در HTML، از خصوصیت سی‌اس‌اس background-image استفاده می‌شود.[۱]

تصویر پس زمینه در یک عنصر HTML

برای اضافه‌کردن تصویر پس زمینه به یک عنصر HTML، می‌توان از ویژگی style استفاده کرد:

مثال

یک تصویر پس زمینه به یک عنصر HTML اضافه می‌کند:

<div style="background-image: url('img_girl.jpg');">


مشاهدهٔ نتیجه


همچنین می‌توان تصویر پس زمینه را در عنصر <style> تعیین کرد:

مثال

یک تصویر پس زمینه در عنصر style تخصیص می‌دهد:

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>


مشاهدهٔ نتیجه


تصویر پس زمینه در یک صفحه

اگر می‌خواهید کل صفحه تصویر پس زمینه داشته باشد، باید تصویر پس زمینه را برای عنصر <body> اختصاص دهید:

مثال

یک تصویر پس زمینه برای یک صفحه HTML اختصاص می‌دهد:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>


مشاهدهٔ نتیجه


تکرار پس زمینه

اگر تصویر پس زمینه از عنصر کوچکتر باشد، تصویر خودش را به صورت افقی و عمودی تکرار می‌کند، تا اینکه به انتهای عنصر برسد.

برای توضیح، ببینید وقتی از یک تصویر کوچک به عنوان پس زمینه در داخل یک عنصر div بزرگ استفاده می‌کنیم، چه اتفاقی می‌افتد:

خصوصیت background-image تلاش می‌کند عنصر div را با تصاویر پر کند تا زمانی که به انتهای آن برسد.

مثال

مثال

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>


مشاهدهٔ نتیجه


برای جلوگیری از تکرار تصویر پس زمینه، از خصوصیت background-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، آموزش پس زمینه CSS ما را مطالعه کنید



منابع آموزشی