CSS Changing background-image height
My css code looks like this:
body
{
background-image(url:(...));
background-repeat: repeat-x;
he开发者_C百科ight:100%;
}
The Question is...How can I fit the background-image to the size of different screens (1024x768) or other.... I mean change the height dynamically for each size of screen?
Try like this...
html {
background: url(....) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Have a look at this article...http://css-tricks.com/perfect-full-page-background-image/
You should try changing the CSS class applied to the body tag using javascript; I suggest you to use a javascript library like jQuery, you could do something like this:
$('body').removeClass('res1');
$('body').addClass('res2');
Using a library like jQuery you have not to worry about browser incompatibility.
<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">
加载中,请稍侯......
精彩评论