集裝箱被向下移動時，頁面大小

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

您在center center中心你background-image，這意味着你background-image坐落在塊的垂直和水平中心。因此，解決方案只是刪除一個center。像這樣的background: url("jumbotron.jpg") no-repeat center; - 在這種情況下，你只是在水平中心background-image。