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

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

 

برای اضافه کردن تصویر پس زمینه روی عنصر های HTML از ویژگی style  در HTML و ویژگی background-image در CSS استفاده می شود.

<div style="background-image: url('html.jpg');">
امتحان کنید

 

شما همچنین می توانید تصویر پس زمینه را در عنصر <style> در بخش <head> مشخص کنید.

<style>

div {

  background-image: url('HTML.jpg');

}

</style>
امتحان کنید

 

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

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

<style>

body {

  background-image: url('HTML.jpg');

}

</style>
امتحان کنید

 

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

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

<style>

body {

  background-image: url('HTML.jpg');

}

</style>
امتحان کنید

 

برای جلوگیری از تکرار تصویر پس زمینه ویژگی background-repeat را روی no-repeat تنظیم کنید.

<style>

body {

  background-image: url('HTML.jpg');

  background-repeat: no-repeat;

}

</style>
امتحان کنید

 

پوشش پس زمینه

اگر می خواهید تصویر پس زمینه کل عنصر را پوشش دهد، می توانید ویژگی background-size را روی cover تنظیم کنید.

همچنین برای اطمینان از این که کل عنصر همیشه پوشیده شده است، ویژگی background-attachment را روی fixed قرار دهید.

به این صورت تصویر پس زمینه کل عنصر را بدون کشش پوشش خواهد داد. ( یعنی تصویر نسبت ابعاد اصلی خود را حفظ می کند.

<style>

body {

  background-image: url('HTML.jpg');

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

}

</style>
امتحان کنید

 

کشش پس زمینه

اگر شما می خواهید تصویر پس زمینه متناسب با کل عنصر کشیده شود، می توانید ویژگی background-size را روی 100% 100% تنظیم کنید.

سعی کنید پنجره مرورگر را اندازه گیری کنید و خواهید دید که تصویر کش خواهد آمد.

<style>

body {

  background-image: url('HTML.jpg');

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: 100% 100%;

}

</style>
امتحان کنید