Reaktywny obraz tła Bootstrap

Question

Jak zrobić, używając bootstrap, uchwyt div posiadający jako tło obrazek pasujący do wyświetlania gości? Obraz ma stałą wysokość i szerokość. Jeśli ekran jest mniejszy, należy przeskalować, aby nie mieć przelewu x, y.

Answer 1

Można użyć background-size takiego:

div.someclass { 
    background-size: cover; 
} 

Istnieje dobry artykuł z @Chris Coyier pokazując kilka technik: http://css-tricks.com/perfect-full-page-background-image/

Answer 2

nie jestem bardzo doświadczony w Bootstrap, ale myślę, że nie ma takiego cecha. Polecam Ci stworzyć własny "Bootstrap Theme", czysty plik CSS lub LESS, aby dostosować swoje tło.

Można po prostu użyć:

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

Kod ten rozciąga obraz tła w obu wymiarach, ale odcina niektóre części obrazu, chyba że racja ekran jest taki sam jak stosunek obrazu.

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

Answer 3

Ten pracował dla mnie:

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

Po pierwsze, dla obrazu tła:

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; 
} 

Uczyni to obraz tła reaguje, to znaczy będzie pasować według rozmiaru wyświetlacz, na którym jest wyświetlana strona.

drugie, aby utrzymać główną treść tworzą właściwą marżę z góry na dowolnym urządzeniu jest dać div po prostu stworzony do głównej zawartości względny margines na górze:

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

zmianę powyższego 5% zgodnie z twoim wymaganiem.

Answer 5

body { 
    background="imagename.jpg"; 
    }