Question

我的css代码如下：

body
{
   background-image(url:(...));
   background-repeat: repeat-x;
   height:100%;
}

问题是......我如何使背景图像符合不同的大小屏幕（1024x768）或其他.... 我的意思是为每种尺寸的屏幕动态改变高度？

Answer 1

试试这个......

html {
        background: url(....) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

看一下这篇文章...... http://css-tricks.com/perfect-full-page-background-image/

Answer 2

您应该尝试使用javascript更改应用于body标签的CSS类;我建议你使用像jQuery这样的javascript库，你可以这样做：

$('body').removeClass('res1');
$('body').addClass('res2');

使用像jQuery这样的库，您不必担心浏览器不兼容。

Answer 3

<HEAD>
<style>
body{margin:0px}
.bg{
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
}
</style>

</HEAD>
<BODY>

<img class="bg" src="pic.jpg" border="0">

CSS更改背景图像高度

3 个答案: