Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Как сделать фон полноэкранным?

Автор: XClan 21.11.2005, 16:35

Кто нибудь подскажет код ява-скрипта, который бы смог фон сделать полноэкранным?
Сделал пошире или выше экран фон точно так же должен следовать.. уменьшению или расширению!
Короче виден фон в том же размере, что и окно..
Я просто нигде такого скрипта не видел, а очень нужен..

Автор: Sardar 21.11.2005, 19:04

JS не умеет ничего рисовать и "не может" управлять фоновой картинкой элемента на прямую, из JS можно изменять состояние обьекта, его стили и т.д. Глянем в CSS 2, видим что никакого background-image-size свойства не существует, следовательно задать размеры фоновой картинки нельзя. Вывод: пока задача не решаема, и к счастью, нечего извращаться над страницей smile

Если на заднем фоне не просто картинка, а тайл (картинка, что можно скопировать друг за другом без швов), то можно задать background-repeat стиль, что бы картинка копировалась.

Автор: Ciber SLasH 22.11.2005, 08:03

Вот попробуй:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta name="Generator" content='EditPlus 2.12'>
<meta name="Author" content='Ciber SLasH'>
<title>JavaScript :: Резиновый background</title>
<script type='text/javascript'>
function doBK() {
var obj = document.getElementById('bkg');

    if (self.innerHeight) {
        obj.width = self.innerWidth;
        obj.height = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
        obj.width = document.documentElement.clientWidth;
        obj.height = document.documentElement.clientHeight;
    }
    else if (document.body) {
        obj.width = document.body.clientWidth;
        obj.height = document.body.clientHeight;
    }
    obj.style.display = '';
}
</script>
<style type='text/css'>
html, body {margin: 0; padding: 0}
#bkg {z-index: 0; position: absolute}
.content {z-index: 1; position: relative; color: red}
</style>
</head>

<body onLoad='doBK()' onResize='doBK()'>
<img id='bkg' src='file://e:/Temp/logo.gif' style='display: none'>
<div class='content'>11111111111111111111111111111111111111111111111111111111111</div>
</body>
</html>

Автор: Sardar 23.11.2005, 00:53

Картинку положить внутрь div'а, координаты выставить в 0, тогда подгонять позиции не нужно, div должен оставаться на релативной позиции. Размеры подгонять под parentNode.offset(Width|Height), т.е. под требуемый элемент, что хотя если для всей страницы, то метод Ciber SLasH "зальёт" и отступы у краёв страницы, что правильней.

В остальном чистой воды изврат, достойный плюса в репу smile