Question

我正在为我的网站创建一个带有大图像的简单标题部分。图像应从导航栏下方填充到浏览器窗口底部的屏幕。目前它没有显示，并且给它的高度为0px。我可以看到它正确地拉动图像，但不确定它为什么不给它一个高度。

这是我的html和css我正在使用。

<!-- banner -->
    <div class="banner">
        <div class="welcome-message">
            <div class="wrap-info">
                <div class="information">
                    <h1 class="animated fadeInDown">Test Content</h1>
                    <p class="animated fadeInUp">This is a test</p>
                </div>
            </div>
        </div>
    </div>
<!-- banner-->

.banner {
    background: url(../images/photos/banner.jpg) no-repeat bottom center scroll;
    background-color: #000 !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    background-size: cover !important;
    -o-background-size: cover !important;
    width: 100%;
    height: auto;
}

Answer 1

首先，您应该更改网页的背景而不是＆＃34; .banner＆＃34;的背景。类。

因此，请将以下代码添加到您的css样式中：

body {
background: url(../images/photos/banner.jpg) no-repeat center center fixed; 
background-size: cover;
background-position: 100% 150px;
}

OR

body {
background: url("http://www.nps.gov/ner/stsp/images/5C74E407-1DD8-B71C-0E0994FC86420E86.jpg")  no-repeat center center fixed; 
background-size: cover;
background-color: #000 !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
background-size: cover !important;
-o-background-size: cover !important;
background-position: 100% 150px;
}

要在导航后启动背景，只需调整＆＃34;背景位置：100％150px;＆＃34;意思是100％的宽度和150px的顶部:)下面是JSFIDDLE我用不同的图片制作的，因为你没有提供你正在使用的那个。

制作背景图片填充屏幕，当前高度为0px

1 个答案: