具有多个背景图像的CSS标头

Question

我正在尝试实现一个有两个背景图像的标题，一个是白色的丝带，另一个是我的标志。我想要这样的东西：

我尝试过CSS3，现在我有了这个：

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

CODE ：

#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将中心的其他图像作为标题的一部分应用于另一个元素。

Answer 2

这是您的工作代码，请查看：

#header{
    width:100%;
    background-image: url(logo.png) , url(header_bg.png);
    background-size: auto, auto;
    background-repeat:no-repeat, no-repeat;
    background-position: center center, center center;  
    font-size: 24px;
    height: 276px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    -o-box-sizing:      border-box;
    box-sizing:         border-box;
}