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

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

Форум программистов > Вёрстка веб-сайтов > Как растянуть background на 100% в DIV-е?

Автор: Роман 8.4.2008, 16:54

Как растянуть background на 100% в DIV-е?

Автор: bars80080 8.4.2008, 16:59

background не растягивается, растянуть можно картинку

можно скажем в div растянуть img, а потом сверху положить такой же слой с абсолютным позиционированием и вместить в него что нужно

Автор: Роман 8.4.2008, 17:04

Да что-то не выходит.
Можно пример какой-нибудь?

Автор: bars80080 8.4.2008, 17:30

Код


<style>
#qw { position: relative; width: 50%; height: 50%; }
#qw img { width: 100%; height: 100%; }
#qw div { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
</style>
<div id="qw"><img src="zzz.jpg" /><div>content er twerg we;lr wl;er wl;ek gwl;eg wekrg werg werkw;elrg wer gwoerg werg ;lwer glwerglkw erlg wler glkwe gwerg  wkerg wekjrg wekg kwergjkweg kwleg wergkjew gklwerg wekrjg wejk gkjwergjkwerg werjg werkgj </div></div>

даже везде работает

Автор: Роман 8.4.2008, 17:37

У меня не работает.

Автор: bars80080 8.4.2008, 17:46

как так не работает? специально проверил под ИЕ6, ФФ и оперу

ты картинку на свою поменял?

Автор: Роман 8.4.2008, 17:57

Цитата(bars80080 @ 8.4.2008, 17:46

)

ты картинку на свою поменял?

конечно

Меня эта задача начинает нервировать - пол дня уже мучаюсь.

Автор: bars80080 8.4.2008, 18:11

какие-то у тебя на месте проблемы

попробуй запустить мой пример на каком-нибудь другом компе, или хотя бы свой перезагрузи (но это скорее всего не поможет)

я помнится после вышибания двух троянов обнаружил что некоторые баги ушли...

Автор: biguser 9.4.2008, 18:18

столкнулся с подобной задачей, подскажите кто сможет, выше пример работает, но вот когда я у себя такое делаю, не понимаю что проиходит и оно не работает... ну собсвенно вот что я делаю:

вывожу картинку на заднем плане:

<img src="img/background.png" id="img-background">

#img-background {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

далее вывожу свой блок:
<div id="panel">
тра-ля-ля
</div>

#panel {
    background-image: url("../img/panel.png");
    background-repeat: no-repeat;
    position: absolute;
    width: 537px;
    height: 240px;
    top: 25%;
    left: 25%;
    padding: 15px;
}

в итоге получаю картинку на заднем фоне растянутую по ширине, а по высоте у меня не заявленые 100% а растянутость получилась соответсвенно полученой ширине, и как следсвие появляется полоса прокрутки, которой не должно быть.

Автор: bars80080 10.4.2008, 09:42

а можно полный html, а то здесь не понятно куда девается <img src="img/background.png" id="img-background">

Автор: biguser 10.4.2008, 12:19

вот примерно такую структуру имеет хтмл-код

Код


<html>
<head>
<titile>Title</title>
<link rel="Stylesheet" href="css/style.css" type="text/css" media="screen">
</head>
<body>
<img src="img/background.png" id="img-background">
<div id="panel">
   <div>Вложеные дивы и таблица</div>
   <div>Еще вложеный див</div>
</div>
</body>
</html>

Автор: bars80080 10.4.2008, 12:45

вот, а теперь смотрим в пример выше http://forum.vingrad.ru/index.php?showtopic=205237&view=findpost&p=1471978 и видим, что там картинка и текст находятся внутри общего дива с position: relative и собственными width и height, которые и являются определяющими для картинки слоя с текстом. у вас же картинка просто болтается в body

Автор: biguser 10.4.2008, 14:12

спасибо за указание моей не точности smile

но как оказалось моя самая главная ошибка была в том что не убрал автоматически сгенерированый тег редактора <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
из-за которого у меня и не работало как хотелось smile

Автор: ISQman 8.4.2009, 12:30

не хотел плодить темы, и поэтому напишу сюда:
ситуёвина с растяжжением бэкграунта, но не всего а только лишь его части
сделал по примерам выше со своими добавлениями, а именно:

Код


.ba { position: relative; height: 100%; display:block; }
.ba img.first {width: 679px; height: 124px; display:block;}
.ba img.second {width: 679px; height: 100%; display:block;}
.ba img.third {width: 679px; height: 393px; display:block;}
.ba div { position: absolute; left: 38px; top: 10px; width: 100%; height: 100%; display:block;}

Код


<td width='679' height=100%>
<div class='ba'>
<img src='images/news-okno-1.png' class='first'>
<img src='images/news-okno-2.png' class='second'>
<img src='images/news-okno-3.png' class='third'>
<div>
tut mnoga contenta mnogomnogmnosd;fvhwgfdc,basvnes<br>
dkjhvsklhvjzsbcvxzfvjkzhd vmfxzjbvzsd<br>
;lxdmv.,kjasbjkfgzjkcbmjzscvnz;skdrvbsvjhlzsbv,kzsdmv;xdm<br>
;'zslasdkjgcvjsuygfhsrfawilej<br>
sidhcshjkughjmzscdjzsdg;lf<br>
klsjhdcjklgzhsjufhdjv/dfb:'fjhp'gv[jk<br>
</div>
</div>
</td>

как видно тянуться по вертикали должно только вторая картинко, НО (!) мало того что оно не хочет тянуться, текст в диве просто вылазит за пределы таблицы и вёрстки вообще. как это можно профиксить?

Автор: Роман 8.4.2009, 15:21

Первая ошибка, которую заметил:

Код


.ba div { position: absolute; left: 38px; top: 10px; width: 100%; height: 100%; display:block;}

Правильнее мне кажется будет так:

Код


.ba div { position: absolute; left: 38px; top: 10px; right: 0px; bottom: 0px; display:block;}

Это растянет блок до конца ячейки.

Такой же принцип растяжения можно применить и к изображению:

Код


.ba img.second { position: absolute; left: 0px; right: 0px; top: 125px; bottom: 680px; display:block;}

Т. е. по принципу абсолютного растяжения.

Автор: ISQman 8.4.2009, 17:35

не помогло... что опера что мозилла не понимают что от них хотят :(
текст как выразил за пределы так и вылазит... пробовал даже вторую картинку дублировать по вертикали - не помогло(((

Автор: ISQman 10.4.2009, 10:43

не очень красиво но решил...

Код


.tbl {background: url('images/news-okno-1.png') no-repeat; }

.tbl DIV.ba {width: 679px; background:url('images/news-okno-2.png')repeat-y;display: block;}

.tbl DIV.ba DIV {margin:12px 0 0 0; padding:0 0 0 38px;display: block;background:url('images/news-okno-3.png') 47% 100% no-repeat;min-height:521px;}

.tbl DIV.ba DIV DIV {width:600px;}

Код


<td width='679' height='100%' class='tbl'>

<div class='ba'>
<div>

много текста с контентом

</div>
</div>

также можно для min-height прописать исключение, но валидаторы начинают на него матюкацо

и в этом коде есть некая проблема с ИЕ, кто может помочь (если такие есть то отпишите), ие стал раскидывать весь дизайн, а остальные браузеры нормально отображают... ? ссылку http://91.202.110.107/test/

справился и с этим, осталось только отображение бэкграунда, ИЕ видеть дублирующийся по-вертикали бэкграунд както не очень хочет