背景宽度为100％的图像中心位置固定

首先，我要感谢所有这一次您所有的答案。作为学生，我通过网站从项目中找到了很多解决方案以及工作。背景宽度为100％的图像中心位置固定

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

对不起，标题。想不到更好的一个。

我尝试开发一个站点，并且遇到标题问题。主页面容器的修正大小为1024px，内部内容限制为960px。只有标题和页脚占据了整个窗口的大小。

我有两个图像：第一个是2000x250（后面的建筑），第二个是2000x58（带房子的语言）。我们分别命名为img_A和img_B。我希望他们两个都根据用户的分辨率（如页脚）来拍摄整个屏幕，但是也要根据高度进行缩放。

问题是我不管屏幕分辨率是什么，img_B都在1024px内居中，所以ES按钮将会在主页面的末端（1024px），因此以margin 0为中心的标志会自动;不要盖房子。

这里有一些图像来说明我所问的更好。

错误（1920×1200）：

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

权（1680×1050）：

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>

在此先感谢

来源

2013-02-16 Laxmana

我不太明白你想达到什么样的，但我认为你想尝试寻找（并加入！）的背景大小的CSS（和也许是后台剪辑）属性到你的#header（或任何地方），在你定义了背景之后。

请注意，在早期版本的IE中不存在支持，因此如果要实现通用兼容性，则可能需要其他解决方法。

来源

2013-02-16 17:43:32 Ben

谢谢！对于我用英语解释我想说什么有点困难。背景位置：使用img_A背景图片可以很好地工作。但是我有与img_B相同的问题。无论分辨率如何，我都无法将它放在同一个地方。取决于分辨率，图像从不同点开始并以不同的方式结束。我总是希望图像上的ES链接位于资源管理器自动对齐的内容页面的末尾。也许这可以更好地说明：http://imageshack.us/photo/my-images/593/headerwrong2.jpg/。谢谢我的英语。 – Laxmana 2013-02-16 18:53:46

你有没有想过创建房屋和语言作为绝对定位的元素，并把它们放在你喜欢/需要的地方放在其他背景中？让我觉得是一种更简单的方法来更好地控制你想要做的事情...... – Ben 2013-02-18 16:36:34

感谢您的帮助！看到这个网站：http：//athensinsiders.com/。这个人做了我想要的一个背景图像。我也想要。如果重新调整窗口大小，每次重新调整窗口大小时都会看到背景位于相同的位置。我尝试了基于他的代码，但我无法做到。关于创建单独图像的好主意。 – Laxmana 2013-02-18 21:24:46

背景宽度为100％的图像中心位置固定

回答

相关问题