html - 具有多个背景图像的 CSS header

Question

我正在尝试实现一个包含两个背景图像的页眉，一个是白丝带，另一个是我的 Logo 。我想要这样的东西:

我试过 CSS3，现在我有了这个:

如您所见， Logo 被裁剪了。增加标题大小对我没有帮助。我尝试增加页眉大小，将 ul 居中对齐，但功能区仅显示为白色层。我无法减小 Logo 的大小以使其适合页眉，否则会太小。

代码:

#header{
    background-image: url(../images/logo.png), url(../images/header_bg.png);
    background-size: auto, cover;
    background-repeat:no-repeat, no-repeat;
    background-position: center center, top center;
    position: absolute;
    top: 45px;
    font-size: 24px;
    //height: 100px;
    margin-left: 16%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    -o-box-sizing:      border-box;
    box-sizing:         border-box;
}

FIDDLE:http://jsfiddle.net/ayushkhemka/PGy3T/

8 小时后才能发布超过 2 个链接或回答我自己的问题 :(

Answer 1

您应该将丝带作为背景图像，并使用 position: absolute 将中心的另一个图像作为另一个元素作为标题的一部分。