css - 宽度为 100% 中心的背景图像以固定位置

Question

首先，我要感谢大家一直以来的回答。无论是学生还是工作期间，我都通过该网站从我的元素中找到了很多解决方案。

在问这个问题之前，我进行了很多搜索，但找不到可行的解决方案。

对不起标题。想不出更好的了。

我尝试开发一个网站，但标题有问题。主页容器的固定大小为 1024px，其中的内容限制为 960px。只有页眉和页脚占据了整个窗口。

我有两张图片:第一张是 2000x250(后面的建筑物)，第二张是 2000x58(带有房屋的语言)。我们分别将它们命名为 img_A 和 img_B。我希望它们都根据用户分辨率(如页脚)占据整个屏幕，但也可以根据高度对其进行缩放。

问题是，无论屏幕分辨率如何，我都希望 img_B 在 1024px 内居中，这样 ES 按钮将位于主页末尾 (1024px)，因此 Logo 居中，边距为 0 auto；不要盖房子。

这里有一些图片可以更好地说明我的要求。

错误 (1920x1200):

http://imageshack.us/photo/my-images/577/headerwrong.jpg/

右 (1680x1050):

http://imageshack.us/photo/my-images/20/headercorrect.jpg/

这是我的 CSS 代码:

#header{
    height: 140px;
    width: 100%;
    background: url(images/background_home.jpg) center center no-repeat;
}

#header .language_banner{
    background: transparent url(images/header_en.png) right bottom no-repeat;
}

#header .logo{
    display:block; 
    width:242px; 
    margin:0 auto;
    padding-top: 63px;
}

和html代码:

<div id="header">
    <div class="language_banner">
        <div class="logo">
            <img alt="athens insiders" src="<?php    bloginfo("template_directory"); ?>/images/logo.png">
        </div>
    </div>
</div>

提前致谢

Answer 1

我不太明白你想要达到什么目的，但我认为你想尝试查看(并添加!)背景大小的 css(也许还有背景剪辑)在定义背景后，将属性添加到#header(或任何地方)。

请注意，早期版本的 IE 不支持此功能，因此如果您要实现通用兼容性，则可能需要另一种解决方法。