Имя: Пароль:
IT
 
 Как растянуть фоновую картинку по вертикали в background-image в CSS? ☑
0 Гений 1С
 
гуру
16.05.08
✎
14:13
http://www.htmlbook.ru/css/background-image.html
Нашел, что можно поставить фоновую картинку, а как ее растянуть на весь контейнер (фон задается для тега TD)?
Не повторять, а именно растянуть по вертикали?
1 Гений 1С
 
гуру
16.05.08
✎
16:18
ап
2 Гений 1С
 
гуру
16.05.08
✎
17:02
ну блин, ап.
3 Fragster
 
гуру
16.05.08
✎
17:06
не растянуть. можно к низу прилепить, или «замостить»
то, что тебе нужно делается через img с абсолютной позицией размером 100% на 100% и z-index = -1
4 Fragster
 
гуру
16.05.08
✎
17:07
только там со скроллингом нужно бороться
5 Гений 1С
 
гуру
16.05.08
✎
17:11
(3) так, что нельзя Image растянуть на всю ячейку TD средствами CSS или пусть даже в HTML коде???
6 Fragster
 
гуру
16.05.08
✎
17:13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
.bg {
   position: fixed;
   z-index: -1;
   height: 100%;
   width: 100%;
   top: 0px;
   right: 0px;
}
</style>
</head>

<body>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p>Превед!</p>
<p><img src="moskow.gif" class="bg"/> </p>
</body>
</html>
7 Fragster
 
гуру
16.05.08
✎
17:15
а в ячейку таблицы - меняй position
8 Гений 1С
 
гуру
16.05.08
✎
17:27
(7) Мне нужен фон ячейки таблицы, а не на весь экран....
У меня в картинке градиентный переход по вертикали, размер ячейки я заранее не знаю, мне надо ее растягивать по вертикали.
Есть тег <td class="back1_for_logos">1S</td>
Как мне поставить фоновую картинку???
Твой метод не годится, какой position, откуды я знаю позишн?

.back1_for_logos  /*** Background with logotype of 1s ***/
{
   background-image: url(/images/logos/top_backgroung.gif);
   background-repeat: repeat-x;
   background-position: left top;
}
9 SeStyle
 
16.05.08
✎
17:49
(8) 1. в css вродь не делается такое; 2. не красиво (лепить градиент); 3. если сильно хочется, сделай картинку ширина 1px высота 600px допустим, и делай сделай ее фоном с повтором по ширине )
4. вариант поработать со слоями
10 Гений 1С
 
гуру
16.05.08
✎
17:51
(9)
Почему некрасиво???
Если я сделаю очень большую картинку, то у меня будет не весь градиент показан по идее.
Неужели такую простую вещь нельзя просто сделать.
Пусть не CSS-ом, а в коде?
11 Fragster
 
гуру
16.05.08
✎
17:53
(8) position: fixed / relative / absolute, иль как там их, имею ввиду! тогда left0top0 - может быть координатами угла текущего блока
12 Гений 1С
 
гуру
16.05.08
✎
18:00
(11) тег BG относится ко всему документу. а мне нужно чтобы бэкграунд применился только к одной ячейке, секешь???
13 Гений 1С
 
гуру
19.05.08
✎
09:58
апну, ибо актуально.
Пока выкрутился, растянув картинку в графическом редакторе до нужного размера, но это же маразм.
14 Гений 1С
 
гуру
19.05.08
✎
18:30
аппну, ибо босс рвет и мечет
15 TitanLuchs
 
19.05.08
✎
18:38
Смотри, как сделано здесь: ячейка с контентом "обрамлена" "резиновой" таблицей, рамка содержит фоновый рисунок с "краями". Все растягивается.
www.1200000dollars.ru
16 Fragster
 
гуру
19.05.08
✎
18:42
(15) там repeat-x и repeat-y стоит. как я понял - не то
17 TitanLuchs
 
19.05.08
✎
18:43
(16) Пусть скажет, что надо-то. Мож другими способами можно сделать
(0) Гений, а что надо получить в итоге?
18 Fragster
 
гуру
19.05.08
✎
18:46
(17) как я понял - чтобы фоновая картинка растягивалась на всю величину ячейки таблицы, а не «мостила» ее, как происходит, если делать repeat
19 TitanLuchs
 
19.05.08
✎
18:48
(18) Это он способ такой предлагает. А мож на самом деле просто рамку красивую охота, а это другими способами лечится. Насколько знаю, решить этот вопрос средствами CSS нельзя, тут надо JavaScript юзать и по событиям отлавливать измение размера ячейки и менять размер картинки соответственно. Слоями поиграться надо.
20 Fragster
 
гуру
19.05.08
✎
18:51
(19) ну я примерно такой вариант в (6) предложил. потом гений все-таки сказал, что для ячейки. потыкал минут 5, не получилось и забил. ну да гений любит всякие методы решения задачи... скажем так, нетрадиционные
21 TitanLuchs
 
19.05.08
✎
18:55
(20) Эт верно. Че-та пропал он, наверно босс таки его изловил, порвал и разметал.
22 Гений 1С
 
гуру
20.05.08
✎
10:08
(17) Да блин, уже говорил.
Есть картинка (градиентная заливка от желтого до оранжевого сверху вниз) высотой 70 пикселов. Нужно ее натянуть на TD. Высота TD заранее неизвестна.
Если я ставлю repeat-y, то градиент нарушается - она тупо повторяет по вертикали.
Нужно, чтобы растягивала по вертикали. Банальнейшая задача, как решить не знаю.
Дошел до того, что хочу тупо поставить высоту TD в 100 и растянуть в редакторе картинку до 100, но это идиотское решение ситуации.
23 Гений 1С
 
гуру
20.05.08
✎
10:08
(19) Жава скрипт не годится...
24 Гений 1С
 
гуру
20.05.08
✎
10:09
Если CSS этого не умеет, то я ваще молчу... Блин, банальнейшая задача...