|
Сообщение от danik.js
|
1
<!DOCTYPE html>
02
<html>
03
<head>
04
<meta charset="utf-8" />
05
<title></title>
06
<style>
07
html{
08
height: 100%;
09
width: 100%;
10
margin: 0;
11
padding: 0;
12
background: #fff;
13
}
14
body{
15
min-height: 100%;
16
margin: 0;
17
padding: 0;
18
background-position: top center;
19
background-repeat: no-repeat;
20
-moz-background-size: 100% 100%;
21
-o-background-size: 100% 100%;
22
background-size: 100% 100%;
23
}
24
p {
25
position: fixed;
26
top: 50%;
27
left: 50%;
28
margin-top: -50px;
29
margin-left: -100px;
30
height: 50px;
31
width: 300px;
32
color: #FFFFFF;
33
font-size: 2em;
34
}
35
</style>
36
</head>
37
<body>
38
<p>Всякая всячина</p>
39
<script>
40
(function(){
41
var interval = 1500,
42
pictures = [
43
'http://imgs.su/tmp/1292024913.jpg',
44
'http://gallery.ykt.ru/galleries/tf2/2012/06/1077057_0.jpg',
45
'http://www.wallgrad.ru/_ph/39/251576366.jpg',
46
'http://yawall.ru/images/Abstrakciya-oboi-dlya-rabochego-stola-izobrajeniya/1920x1080/50459-Golubovatiy-fon-s-beloy-izognctoy-liniey-1920x1080.jpg'
47
];
48
49
for (var i = 0; i < pictures.length; i++) {
50
(new Image()).src = pictures[i];
51
}
52
53
var imageIndex = 0;
54
setInterval(function(){
55
var image = pictures[imageIndex++] || pictures[imageIndex = 0];
56
if (document.addEventListener) {
57
document.b ody.style.backgroundImage = 'url('+ image + ')';
58
} else {
59
document.b ody.style.filter = 'progid XImageTransform.Microsoft.AlphaImageLoade r(src=' + image + ', sizingMethod="scale")';
60
}
61
}, interval);
62
})();
63
</script>
64
</body>
65
</html>
|
Эта штука растягивает изображение и по ширине и по высоте. А можно сделать так, чтобы растягивалась только ширина? Ну то есть ширина - 100%, а высота - как получится, в зависимости от пропорций экрана. А выступающий за пределы кусок обрезается.