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>

Viewable on voiddevelopment.com

It seems as though whenever I shrink the page to the width of the phone, the image gets a ton of padding on the top and bottom, making it look like there's a lot of white space.

Looks like background-align automatically centers if you do not specify a value.

Answer 1

您将background-image置于center center中，这意味着您background-image位于街区的垂直和水平中心。因此，解决方案只是删除一个center。与此background: url("jumbotron.jpg") no-repeat center;一样 - 在这种情况下，您只需将background-image置于水平位置。

Container gets moved down when page resized

1 个答案: