如何使横幅图像延伸整个长度，并使徽标居中？

Question

我是设计和布局的新手，我得到了这个线框：

http://problemio.com/problemionewest.pdf

我必须使灰色边框延伸整个宽度，并使徽标垂直居中。

现在我有这个大声笑：http://www.problemio.com - 横幅一直延伸，但由于重复，它的右侧有一条丑陋的垂直线。而且，我不确定如何使徽标图像居中。原始图像有点大，所以我需要将其与原始图像进行一定比例的对齐，并将其垂直对齐。

我有什么想法可以做到这些吗？

谢谢！

Answer 1

将此内容添加到 div.banner 类background-size: 100%;

和div.site_title margin-top: -20px;

哦，安装萤火虫并在下次自己动手

Answer 2

您需要执行以下操作：

1. 在height我选择.banner

上设置新的70px

2. 给.banner <{1}}

3. 从background-size:100%移除vertical-align并添加.site_title

<强> CSS

margin-top: -15px;

Answer 3

尝试border-right：0;

.banner {
position: relative;
height: 70px;
z-index: 1;
border-style: solid;
border-width: 1px;
border-color: gray;
background-image: url('http://www.problemio.com/img/ui/banner_background.png');
background-size: 100%;
border-right: 0;
}