Jak używać responsywnego obrazu tła w css3 w bootstrapie

Question

Nie chcę używać znacznika html. To jest moje css. Używam programu bootstrap 3.0.

background:url('images/ip-box.png')no-repeat; 
background-size:100%; 
height: 140px; 
display:block; 
padding:0 !important; 
margin:0; 

Przy powiększeniu 100% jest to OK. ale gdy powiększam o 180% mniej, obraz będzie krótki od góry i dołu, chcę trochę trików.

Answer 1

Dla pełnego obrazu tła, sprawdź to:

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

Answer 2

Trzeba użyć background-size: 100% 100%;

Demo

Demo 2 (nie rozciągnie, to co robisz)

Objaśnienie: Należy użyć wartości 100% 100% zestawy dla X AS WELL AS Y, ustawiasz 100% tylko dla parametru X, dlatego tło nie rozciąga się w pionie.

---

Mimo to obraz będzie rozciągać się, że nie będzie reagować, jeśli chcesz, aby rozciągnąć background proporcjonalnie, można spojrzeć na background-size: cover; ale IE stworzy problemy dla was jak to nieruchomość CSS3, ale tak, możesz użyć CSS3 Pie jako polyfill. Ponadto użycie cover spowoduje przycięcie obrazu.

Answer 3

to sprawdzić,

body { 
    background-color: black; 
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Answer 4

ścieżka Plik 'images/ip-box.png' oznacza, że ​​plik css jest na tym samym poziomie, co obrazy folderu.

Prawdopodobnie bardziej popularne są foldery "obrazów" i "css" na tym samym poziomie, co plik "index.html".

Jeśli tak było, a plik css były o jeden poziom w dół w danym folderze, następnie droga do ip-box.jpg jak określono w pliku css będzie: '../images/ip-box.png'

Answer 5

znalazłem to:

Pełna

łatwy w użyciu, pełna strona obraz tła szablonu dla Bootstrap 3 stronach

http://startbootstrap.com/template-overviews/full/

lub

używając w głównym pojemniku Gr:

html

<div class="container-fluid full"> 


</div> 

css:

.full { 
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
    height:100%; 
} 

Answer 6

Zestaw Responsive i przyjazny dla użytkownika Tło

<style> 
body { 
background: url(image.jpg); 
background-size:100%; 
background-repeat: no-repeat; 
width: 100%; 
} 
</style> 

Answer 7

Spróbuj tego:

body { 
    background-image:url(img/background.jpg); 
    background-repeat: no-repeat; 
    min-height: 679px; 
    background-size: cover; 
}