Контейнер получает перемещается вниз, когда страница изменяется

Question

CSS:

.jumbotron{ 
    background: url("jumbotron.jpg") no-repeat center center; 
    -webkit-background-size: 70%; 
    -moz-background-size: 70%; 
    -o-background-size: 70%; 
    background-size: 70%; 
    margin-top: 0 auto; 
} 

.push-spaces { 
    height: 550px; 
} 
.supporting { 
    padding-top: 80px; 
    padding-bottom: 100px; 
} 

.supporting .col { 
    float: left; 
    width: 33%; 
    font-family: 'Raleway', sans-serif; 
    text-align: center; 
} 

.supporting .glyphicon { 
    font-size: 4em; 
} 

HTML:

<div class="jumbotron"> 
    <div class="container-fluid push-spaces"> 

    </div> 
</div> 

Видимая на voiddevelopment.com

Кажется, что всякий раз, когда я сжать страницу по ширине на телефоне изображение получает тонну отступов сверху и снизу, что делает его похожим на много белого пространства.

Похоже, что выравнивание по центру автоматически центрируется, если вы не указали значение.

Answer 1

Вы сосредоточили вас background-image в center center, это означает, что вы background-image, расположенный в вертикальном и горизонтальном центре вашего квартала. Таким образом, решение просто удаляет один center. Нравится background: url("jumbotron.jpg") no-repeat center; - в этом случае вы просто центрируете background-image в горизонтальном положении.