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

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

Форум программистов > Вёрстка веб-сайтов > Растягивающийся фон

Автор: Borland_Delphi_6 26.4.2006, 19:49

Нужно сделать такую, простую вроде бы задачу: есть картинка, скажем, 640х480, которая стоит в фоне странички. При разрешении моника 640х480 все смотрится нормально, а при 800х600 - уже нет, фон начинает дублироваться. Так вот, как сделать, чтобы фон автоматически подгонялся под размеры страницы? Че-то я никак не врублюсь... Нужно это либо на простом ХТМЛ, либо КСС, ну на край - JScript...

Спасибо.

Автор: Burrr 26.4.2006, 19:53

Если ты хочешь, чтобы фон не размножался, а оставался в одном месте, то это делается стилем:

Код


.{background-repeat:no-repeat}

А чтобы фон растягивался, гмм. Это скорее к JavaScript-у, и то не уверен.

Автор: Bangladesh 26.4.2006, 20:56

div! объясню, использую материалы dm9

вот страница:
http://dm9.ru/vingrad/examples/html/stretchimage/

кусок кода:

Код


#head div.img img {
    width: 100%;
    height: 137px;
}

замени на

Код


#head div.img img {
    width: 100%;
                height: 100%;
    height: 137px;
}

но надо учитывать, конечно, то, что на картинке... нарисвоано

Автор: Borland_Delphi_6 27.4.2006, 17:33

Не, че-то не то. Еще раз: мне надо сделать так, чтобы определенная картинка занимала всю страницу, даже если ее разрешение меньше разрешения монитора. А в случае, если разрешение монитора меньше размера картинки, браузер не отображал бы скролл-баров...

Автор: R.M. 28.4.2006, 10:20

Думаю надо на дальний слой сунуть див с картинкой с размерами на 100% и overflow: hidden; (чтобы скролла небыло) и на передний слой всё остальное smile

Автор: Borland_Delphi_6 6.5.2006, 14:18

Че-то я не догоняю никак smile

Автор: Illuminaty 6.5.2006, 15:22

Решение:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
head, body {
    height: 100%;
    width: 100%;
}
body {
    margin: 0px;
    padding: 0px;
    background: transparent;
}
#backDIV {
    height: 100%;
    width: 100%;
    position:absolute;
    z-index: 10;
}
#backDIV img {
    height: 100%;
    width:100%;
}
#bodyDIV {
    position: absolute;
    z-index: 20;
    height: 100%;
    width: 100%;
    overflow: auto;
}
</style>
</head>
<body>
<div id="backDIV"><img src="someimage_path"></div>
<div id="bodyDIV">sometext<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
sometext</div>
</body>
</html>

Все содержимое помещаем не в body, а в <div id="bodyDIV">.

Удачи!

Автор: Borland_Delphi_6 13.5.2006, 15:45

Illuminaty, большое спасибо!