CSS 图像背景 - 将高度拉伸(stretch)到 100% 但保持图像在页面上水平居中

标签 css

任何帮助将不胜感激!!

我正在处理的页面在这里 http://www.iknowpost.com/

我试图做的是将背景图像拉伸(stretch)到 100% 高度,而不管查看者的屏幕大小如何,同时始终使图像在页面上水平居中。到目前为止,我已经弄清楚了 100% 的高度,但我一直在尝试弄清楚如何将它水平居中,但没有成功——目前它是固定的 left: 0px;我认为这应该很简单。我的代码在下面,也许这不是解决这个问题的正确方法。谢谢!

<style type="text/css">
#background {
width: 100%; 
height: 100%; 
position: fixed;
left: 0px; 
top: 0px; 
z-index: -1;
}

.stretch {
    height:100%;
}
</style>

</head>

<body>
<div id="background">
    <img src="logo.jpg" class="stretch" alt="" />
</div>
</body>
</html>

最佳答案

也许这会有所帮助

<html>
<head>
    <style type="text/css">
        #background {
            width: 700px;
            height: 100%; 
            margin: 0 auto;
            z-index: -1;
        }

        .stretch{
            height:100%;
        }
    </style>
</head>
<body>
    <div id="background">
        <img src="logo.jpg" class="stretch" alt="" />
    </div>
</body>

关于CSS 图像背景 - 将高度拉伸(stretch)到 100% 但保持图像在页面上水平居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7153053/

相关文章:

javascript - 如何使用javascript在ul标签中创建元素li img标签?

css - div 内 100% 宽的表格不喜欢边距

html - 减少div的宽度在css中移动到左侧

html - 如何在外部 CSS 文件中指定特定表格行的颜色?

html - Bootstrap 3 header 在 Firefox 上看起来不正确

CSS 图片库不会居中

css - 如何覆盖边框 :none?

css - CSS 样式名称

javascript - jquery/javascript 函数只能工作一次

HTML5/CSS3 iPad 3D