VPF::Растягивающийся фон - Форум программистов

Borland_Delphi_6

Дата 26.4.2006, 19:49 (ссылка)

(нет голосов)

Загрузка ...

LoneLINEss

Профиль
Группа: Участник Клуба
Сообщений: 2509
Регистрация: 5.11.2002
Где: in fortune dreams ...

Репутация: нет
Всего: 20

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

Спасибо.

--------------------

Blind Guardian Fan :: BMSTU Student :: A polar bear is a rectangular bear after a coordinate transform.

Мои фотографии

Burrr

Дата 26.4.2006, 19:53 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 5
Всего: 20

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

Код


.{background-repeat:no-repeat}

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

--------------------

JavaScript на fastcoder, sqlinfo.ru

Bangladesh

Дата 26.4.2006, 20:56 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17

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 (ссылка)

(нет голосов)

Загрузка ...

LoneLINEss

Профиль
Группа: Участник Клуба
Сообщений: 2509
Регистрация: 5.11.2002
Где: in fortune dreams ...

Репутация: нет
Всего: 20

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

--------------------

Blind Guardian Fan :: BMSTU Student :: A polar bear is a rectangular bear after a coordinate transform.

Мои фотографии

R.M.

Дата 28.4.2006, 10:20 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

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

--------------------

Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia

Borland_Delphi_6

Дата 6.5.2006, 14:18 (ссылка)

(нет голосов)

Загрузка ...

LoneLINEss

Профиль
Группа: Участник Клуба
Сообщений: 2509
Регистрация: 5.11.2002
Где: in fortune dreams ...

Репутация: нет
Всего: 20

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

--------------------

Blind Guardian Fan :: BMSTU Student :: A polar bear is a rectangular bear after a coordinate transform.

Мои фотографии

Illuminaty

Дата 6.5.2006, 15:22 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Решение:

Код

<!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 (ссылка)

(нет голосов)

Загрузка ...

LoneLINEss

Профиль
Группа: Участник Клуба
Сообщений: 2509
Регистрация: 5.11.2002
Где: in fortune dreams ...

Репутация: нет
Всего: 20

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

--------------------

Blind Guardian Fan :: BMSTU Student :: A polar bear is a rectangular bear after a coordinate transform.

Мои фотографии

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »