ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Css заливка картинки во всю строчку в table
9 сообщений из 9, страница 1 из 1
Css заливка картинки во всю строчку в table
    #38540002
Фотография surbanec
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
surbanec
Участник
здравствуйте форумчане
имеется следующая конструкция:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
	<table summary="" border="0">
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   </table>



3 столбца 3 строки

теперь как через стили залить в бэкгроунд изображение во всю строку тейбла.
т.е. должно получится что будет 3 полоски сделанные картинкой которые идут через 3 столбца.

пробовал в tr сделать бекгроунд, но это ничего не дало. как реализовать данное?
...
Рейтинг: 0 / 0
28.01.2014, 09:26
| Ответить | Цитировать | Написать  
Css заливка картинки во всю строчку в table
    #38540098
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
surbanecтеперь как через стили залить в бэкгроунд изображение во всю строку тейбла.
т.е. должно получится что будет 3 полоски сделанные картинкой которые идут через 3 столбца.
Дык вроде все просто...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
tr {
	background: url('http://cdn.sql.ru/css/images/logo.gif') repeat-x;
}
td {
	width: 100px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table summary="" border="0">
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
</table>
</body>
</html>


surbanecпробовал в tr сделать бекгроунд, но это ничего не дало.
Показал бы как пробовал...
...
Рейтинг: 0 / 0
28.01.2014, 10:32
| Ответить | Цитировать | Написать  
Css заливка картинки во всю строчку в table
    #38540193
Фотография surbanec
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
surbanec
Участник
krvsa,

не. не то. нужно картинку не замостить а растянуть на весю строчку через все столбцы.
щас прикреплю графический пример.

в картинке в верху как получается, а внизу как хочу сделать
...
Рейтинг: 0 / 0
28.01.2014, 11:21
| Ответить | Цитировать | Написать  
Css заливка картинки во всю строчку в table
    #38540347
Фотография surbanec
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
surbanec
Участник
посидел, поискал... решения с помощью сss не нашел..

а так пару вариантов либо подкладывать картинку под строку таблици, либо делать тейбл в тейбле

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<table>
  <tr>
     <td style="background url('bg.jpg')">

                    <table><tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> </table>
     </td>
  </tr>
.......

</table>
...
Рейтинг: 0 / 0
28.01.2014, 12:52
| Ответить | Цитировать | Написать  
Css заливка картинки во всю строчку в table
    #38540656
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
surbanecнужно картинку не замостить а растянуть на весю строчку через все столбцы
Это уже CSS3
http://htmlbook.ru/faq/kak-rastyanut-fon-na-vsyu-shirinu-okna
...
Рейтинг: 0 / 0
28.01.2014, 15:29
| Ответить | Цитировать | Написать  
Css заливка картинки во всю строчку в table
    #38540659
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот растянутая картинка...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
tr {
	background: url('http://cdn.sql.ru/css/images/logo.gif') no-repeat;
	/* Firefox 3.6+ */
	-moz-background-size: 100%; 
	/* Safari 3.1+ и Chrome 4.0+ */
	-webkit-background-size: 100%; 
	/* Opera 9.6+ */
	-o-background-size: 100%; 
	/* Современные браузеры */
	background-size: 100%; 
}
td {
	width: 100px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table summary="" border="0">
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
28.01.2014, 15:32
| Ответить | Цитировать | Написать  
Css заливка картинки во всю строчку в table
    #38541052
Фотография surbanec
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
surbanec
Участник
krvsa,
да не не то. не работает. картинка растягивается внутри td а не через все tr

я искал, вроде пока решения с помощью css нет(

это понятно что картинку можно растянуть на весь контейнер. но с tr такое не работает.
если указывать в tr бекгроунд то будет несколько картинок ( в зависимости от количества столбцов) растянутых по ширине этих столбцов. нужно чтобы была одна картинка растянутая по ширине всего тейбла проходящая через все столбцы. а по высоте эта картинка должна растягиваться по высоте столбцов которые входят в эту строку. в общем сам уже запутался... в общем хочу сделать как на картинке которую я прикреплял.( не сверху где, а снизу картинки)
...
Рейтинг: 0 / 0
28.01.2014, 18:15
| Ответить | Цитировать | Написать  
Css заливка картинки во всю строчку в table
    #38541487
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
surbanecэто понятно что картинку можно растянуть на весь контейнер. но с tr такое не работает
Попробуй на tbody...
Правда в этом случае придется его делать для каждой строки...
...
Рейтинг: 0 / 0
29.01.2014, 08:24
| Ответить | Цитировать | Написать  
Css заливка картинки во всю строчку в table
    #38542029
Сергей111
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей111
Участник
surbanec, Попробуйте так. Вроде неплохо получается.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">

table {
	background: url('http://bglabs.evade.netdna-cdn.com/wp-content/uploads/2013/02/clouds-seamless-background.jpg') repeat-x;
}
tr:hover {
	background: url('http://bglabs.evade.netdna-cdn.com/wp-content/uploads/2013/02/clouds-seamless-background.jpg') repeat-x;
}
td {
	width: 1000px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table border="0" >
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
29.01.2014, 13:53
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Css заливка картинки во всю строчку в table
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=109&tid=1447446]:
 0ms
get settings:
 8ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 201ms
get topic data:
 12ms
get forum data:
 4ms
get page messages:
 52ms
get tp. blocked users:
 2ms
others: 234ms
total:  532ms
созд. / загр.: 532ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]