Растянуть изображение фоном.
Есть у меня скрипт, меняющий картинки.
Вот такой:
<!DOCTYPE HTML>
<HTML>
<META http-equiv=Content-Type content='text/html; charset=windows-1251'>
<title></title>
<script type="text/javascript">
var speed = 1500
var Pic = new Array()
Pic[0] = 'image/img_1.png'
Pic[1] = 'image/img_2.png'
Pic[2] = 'image/img_3.png'
Pic[3] = 'image/img_4.png'
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runBGSlideShow(){
if (document.body){
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)
}}
</script>
<style type="text/css">
body{background-repeat: no-repeat;background-position: 275 0;}
</style>
</HEAD>
<body onload="runBGSlideShow()">
</BODY></html>
Но картинки, хоть и являются фоном, не заполняют все пространство. Я хочу сделать так, чтобы они по ширине соответствовали окну, то есть были 100%. Я знаю, как это сделать в html и css, но тут картинки задаются через Javascript. А я не знаю, что делать :) |
Есть свойство http://htmlbook.ru/css/background-size
Или ставить картинку тегом <img width="100%" src="" style="position:absolute; top:0; margin:0 auto"> И менять у неё src Картинку ставим перед body |
Ahterknica,
а у нас было
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
p {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
height: 50px;
width: 300px;
color: #FFFFFF;
font-size: 2em;
}
* html p {
position: absolute;
}
</style>
<script type="text/javascript">
var i , t,
b;
var speed = 1500
var Pic = ['http://imgs.su/tmp/1292024913.jpg',
'http://gallery.ykt.ru/galleries/tf2/2012/06/1077057_0.jpg',
'http://www.wallgrad.ru/_ph/39/251576366.jpg',
'http://yawall.ru/images/Abstrakciya-oboi-dlya-rabochego-stola-izobrajeniya/1920x1080/50459-Golubovatiy-fon-s-beloy-izognctoy-liniey-1920x1080.jpg']
var j = 0
var p = Pic.length
for (i = 0; i < p; i++){
var preLoad = new Image()
preLoad.src = Pic[i]
Pic[i] = preLoad
}
function get(a) {
var c = document,
d = c.body,
e = c.documentElement,
f = "client" + a;
a = "scroll" + a;
return c.compatMode === "CSS1Compat" ? Math.max(e[f], e[a]) : Math.max(d[f], d[a])
}
window.onload = fon;
i = new Image;
function fon() {
window.clearTimeout(t);
j++
j %= p
i.src = Pic[j].src;
i.style.position = "absolute";
i.style.left = "0px";
i.style.top = "0px";
i.style.width = get("Width") + "px";
i.style.height = get("Height") + "px";
i.style.zIndex = -999;
i.id="img"
document.body.appendChild(i)
t = setTimeout(fon, speed)
}
window.onresize = function () {
var i = document.getElementById("img");
if(i) document.body.removeChild(i);
window.clearTimeout(b);
b = window.setTimeout(function () {
fon()
}, 20)
};
</script>
</head>
<body>
<p>Всякая всячина</p>
</body>
</html>
|
рони, что это за херня? Можешь в кратце рассказать что она делает и почему так много кода?
Deff, все верно, только если top:0, то и left:0, и margin:0 auto тут не будет работать (auto для position:absolute не работает) И возможно не absolute, а fixed, и может еще z-index: -1 И не перед body( какого ..??) а внутри него конечно же. Но картинка - хреновый вариант. Те немногочисленные бедняги что зашли с IE8 обойдутся обычным фоном, не растянутым. Можно еще для IE8 задать через
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/workshop/graphics/earglobe.gif', sizingMethod='scale');"
Но эта хрень ломает пропорции. |
Цитата:
|
Цитата:
<!DOCTYPE HTML> <html> <head> </head> <body style="width:100%;text-align:center;"> <img width=100% src="http://javascript.ru/forum/images/smilies/smile.gif" style="position:absolute; top:0; margin:0"/> </body> </html> |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #fff;
}
body{
min-height: 100%;
margin: 0;
padding: 0;
background-position: top center;
background-repeat: no-repeat;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
p {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
height: 50px;
width: 300px;
color: #FFFFFF;
font-size: 2em;
}
</style>
</head>
<body>
<p>Всякая всячина</p>
<script>
(function(){
var interval = 1500,
pictures = [
'http://imgs.su/tmp/1292024913.jpg',
'http://gallery.ykt.ru/galleries/tf2/2012/06/1077057_0.jpg',
'http://www.wallgrad.ru/_ph/39/251576366.jpg',
'http://yawall.ru/images/Abstrakciya-oboi-dlya-rabochego-stola-izobrajeniya/1920x1080/50459-Golubovatiy-fon-s-beloy-izognctoy-liniey-1920x1080.jpg'
];
for (var i = 0; i < pictures.length; i++) {
(new Image()).src = pictures[i];
}
var imageIndex = 0;
setInterval(function(){
var image = pictures[imageIndex++] || pictures[imageIndex = 0];
if (document.addEventListener) {
document.body.style.backgroundImage = 'url('+ image + ')';
} else {
document.body.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + image + ', sizingMethod="scale")';
}
}, interval);
})();
</script>
</body>
</html>
Работает даже в IE8. Можно зааттачить изображение если назначать его тегу html и прописать background-attachment: fixed (правда что делать с IE8 - не знаю) |
Цитата:
|
Цитата:
Я его использовала, сделала страницу, и когда смотрю её с компьютера (ну то есть страница лежит у меня в диске D), то все нормально, а вот сейчас загрузила на хостинг - и все. Картинки не грузятся, тормозят. Все плохо..( Вот так примерно: http://whitesea-camp.ru.preview.ihc.ru |
Ahterknica, хреново вы залили:
Цитата:
|
| Часовой пояс GMT +3, время: 08:58. |