آموزش ایجاد پس زمینه تمام تصویر در css

در این مقاله می آموزید که چطور با استفاده از CSS و Html صفحه ای با پیش زمینه تماما تصویر ایجاد کنید.

تصویر تمام صفحه

بیاموزید که چطور یک پس زمینه تمام تصویر ایجاد کنید که کل صفحه مرورگر را در برگیرد.

چطور یک تصویر تمام قد ایجاد کنیم

از مولفه container استفاده کنید و با استفاده از height: 100% تصویر پیش زمینه را به container اضافه کنید.

توجه :  برای اینکه نیمی از پیش زمینه شامل تصویر باشد از 50% استفاده کنید. سپس از ویژگی background برای قرار دادن تصویر در مرکز صفحه استفاده کنید:

توجه :  برای اینکه مطمئن شوید که تصویر تمام صفحه را در بر میگیرد شما باید به هر دوی html و body ، height: 100% را اضافه کنید.

قدم اول : کد HTML را اضافه کنید.
مثال :

 این مثال یک تصویر پس زمینه کامل را ایجاد می کند. سعی کنید اندازه پنجره مرورگر را تغییر دهید تا ببینید چطور همیشه صفحه تمام صفحه را پوشش می دهد (وقتی به بالا اسکرول می شود) و در همه اندازه صفحه به خوبی مقیاس می گیرد


                

قدم دوم :   کد CSS را اضافه کنید.
مثال :

body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("http://articles.tahlildadeh.com/image.axd?picture=img_girl.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


                

<div class="bg"></div>

<p>این مثال یک تصویر پس زمینه کامل را ایجاد می کند. سعی کنید اندازه پنجره مرورگر را تغییر دهید تا ببینید چطور همیشه صفحه تمام صفحه را پوشش می دهد (وقتی به بالا اسکرول می شود) و در همه اندازه صفحه به خوبی مقیاس می گیرد</p>

 

خروجی افکت Full Page Image  

تصویر پیش زمینه بصورت نیم صفحه :

<div class="bg"></div>

<p>این مثال یک تصویر پس زمینه کامل را ایجاد می کند. سعی کنید اندازه پنجره مرورگر را تغییر دهید تا ببینید چطور همیشه صفحه تمام صفحه را پوشش می دهد (وقتی به بالا اسکرول می شود) و در همه اندازه صفحه به خوبی مقیاس می گیرد</p>

 

خروجی افکت Half Page Image