Önyükleme yanıtı arka plan resmi

Question

Ziyaretçiye ekrana sığacak şekilde bir arka plan olarak sahip bir div tutucu olan bootstrap'i kullanarak nasıl yapabilirim? Görüntü sabit bir yüksekliğe ve genişliğe sahiptir. Ekran küçülürse, x, y taşma olmaması için yeniden boyutlandırılmalıdır.

Böyle background-size kullanabilirsiniz

Answer 1

:

div.someclass { 
    background-size: cover; 
} 

Birkaç teknikleri gösteren @Chris Coyier iyi bir makale: Çok Bootstrap deneyimli değilim http://css-tricks.com/perfect-full-page-background-image/

Answer 2

ama böyle olduğunu düşünüyorum özellik. Arka planınızı özelleştirmek için kendi "Bootstrap Theme" inizi, saf CSS veya LESS dosyasını oluşturmanızı öneriyorum.

body 
{ 
    background: url(https://www.google.hu/images/srpr/logo4w.png); 
    background-size: cover; 
} 

Bu kod, her iki boyutta arka plan resminizi uzanıyor, ancak ekran rasyon görüntü oranı ile aynıdır sürece, resmin bazı bölümlerini keser:

Sadece kullanabilirsiniz.

body 
{ 
    background: url(https://www.google.hu/images/srpr/logo4w.png) no-repeat center center fixed; 
    background-size: cover; 
} 

Answer 3

Bu benim için çalıştı:

body{ 
     background-image: url('../url') ; 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     height:100%; 

    } 

Answer 4

Birincisi, arka plan görüntüsü için:

div.someclass{ 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

o büyüklüğüne göre uyacak yani bu, sizin arka plan görüntüsü duyarlı hale getirecek sayfa görüntüleniyor.

div.someclass{ 
margin-top:5%; 
} 

değişikliği yukarıdaki% 5:

İkincisi, herhangi bir cihaz üzerinde yukarıdan ana form içeriğinize uygun bir marj tutmaya sadece üst ana içerik için göreceli bir marj oluşturulan div vermektir senin ihtiyacına göre.

Answer 5

body { 
    background="imagename.jpg"; 
    }