Два background'а для body (слева и справа от контента)? - HTML и CSS

alex2406 · 13.06.2010, 01:33

Есть готовый сайт фиксированной ширины. В шапке сайта картинка, которую надо продублировать по горизонтали на всю ширину экрана (см. рисунок). Вся проблема в том, что левый и правый края этой картинки разные, поэтому надо два background'а.
Как расположить блоки? Как реализовать это?

MrJenika · 13.06.2010, 12:11

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

то есть как одну картинку использовать так :
<div><img src="ссылка на картинку" width=""></div>

и уже в стилях задать ширину этому блоку, только картинку тоже лучше рисовать той же ширины как и сайт.
Либо если вы предполагаете что фиксированным будет только центральный блок, а боковые резиновые, то вам надо будет взять центральную часть картинки как отдельную, а те что по бокам (то есть уже там где нет изгибов и они идут просто прямыми линиями)нарисовать однопиксельную картинку и делать через repeat x .

Для того чтобы расположить центральную картинку строго по центру необходимо будет задать ей фиксированную ширину и высоту и в стилях margin:0 auto;
То есть у вас будут три блока на шапку ( это только для картинок).
Извините за много букав, сам то я понимаю что да как, а вот объяснить никак не получается(

Sensizu · 13.06.2010, 15:31

подсоединяем css-файл, а в нём

Код:

body {
background: url(...) top right; // картинка справа
background: url(...) top left; // картинка слева
...
}

:
И еще параметр no-repeat (repeat-x, repeat-y), если нужно повторять фон автоматически.

Magneto · 13.06.2010, 17:18

Sensizu - Ваш способ абсолютно не решает проблему.

MrJenika · 14.06.2010, 13:04

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

HoBuHKuй · 14.06.2010, 14:21

ГЫЫЫ!!! таблица в начале, картинка. таблица в конце, картинка.
ЧЕ ТАК СЛОЖНО? Если не понятно пример:

Код:

<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td>
Здеся шапоччка!!
</td>
</tr>
<tr>
<td>
Здеся левая
</td>
<td>САМО САЙТО
</td>
<td>
Правая
</td>
</tr>
</table>
</body>
</html>

_________
P.S.- если у сайта есть низ то вставляем между </tr> u </table>
<tr>
<td>
НИЗ
</td>
</tr>

MrJenika · 14.06.2010, 16:06

Пора бы дивами верстать)))

Sensizu · 14.06.2010, 16:34

да, предыдущий пост не решал проблему.. понал, перечитал.
Что думаю: почему бы не поставить в CSS один фон на левую часть (repeat-x), один на правую (repeat-x) и один на середину, где сам сайт (no-repeat).
По мне так легче залить всю картинку целяком и кинуть в фон шапки =\

13.06.2010, 01:33	#1
alex2406 Новичок Джуниор Регистрация: 26.11.2008 Сообщений: 1	Два background'а для body (слева и справа от контента)? Есть готовый сайт фиксированной ширины. В шапке сайта картинка, которую надо продублировать по горизонтали на всю ширину экрана (см. рисунок). Вся проблема в том, что левый и правый края этой картинки разные, поэтому надо два background'а. Как расположить блоки? Как реализовать это?

13.06.2010, 12:11	#2
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	если сайт фиксированной ширины, то просто используйте одну картинку на всю шапку, то есть выделите под шапку один блок и картинку можете указать не как бекграунд а просто тегом картинки, либо разрезать картинку на две части чтобы грузилась быстрее и расположить блоки один за другим. то есть как одну картинку использовать так : <div><img src="ссылка на картинку" width=""></div> и уже в стилях задать ширину этому блоку, только картинку тоже лучше рисовать той же ширины как и сайт. Либо если вы предполагаете что фиксированным будет только центральный блок, а боковые резиновые, то вам надо будет взять центральную часть картинки как отдельную, а те что по бокам (то есть уже там где нет изгибов и они идут просто прямыми линиями)нарисовать однопиксельную картинку и делать через repeat x . Для того чтобы расположить центральную картинку строго по центру необходимо будет задать ей фиксированную ширину и высоту и в стилях margin:0 auto; То есть у вас будут три блока на шапку ( это только для картинок). Извините за много букав, сам то я понимаю что да как, а вот объяснить никак не получается( webinmd.com Последний раз редактировалось MrJenika; 13.06.2010 в 12:19.

13.06.2010, 15:31	#3
Sensizu Otsukitakitte Форумчанин Регистрация: 01.10.2009 Сообщений: 126	подсоединяем css-файл, а в нём Код: `body { background: url(...) top right; // картинка справа background: url(...) top left; // картинка слева ... }` : И еще параметр no-repeat (repeat-x, repeat-y), если нужно повторять фон автоматически. Помог - ставь плюс. $("question").onAnswer(function() { $(this).getItWright(true); });

14.06.2010, 13:04	#5
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	чтобы понять что решит проблему нужно написать весь код, а это, извините, займёт много времени,если автору нужна помощь, он должен хотя бы наработки свои предоставить. webinmd.com

14.06.2010, 14:21	#6
HoBuHKuй Мучуюсь Пользователь Регистрация: 31.05.2010 Сообщений: 30	ГЫЫЫ!!! таблица в начале, картинка. таблица в конце, картинка. ЧЕ ТАК СЛОЖНО? Если не понятно пример: Код: `<html> <head> <title></title> </head> <body> <table> <tr> <td> Здеся шапоччка!! </td> </tr> <tr> <td> Здеся левая </td> <td>САМО САЙТО </td> <td> Правая </td> </tr> </table> </body> </html>` _________ P.S.- если у сайта есть низ то вставляем между </tr> u </table> <tr> <td> НИЗ </td> </tr> Куда идем мы с пятачком бооооооольшой бооольшой секрет! (а идем мы учить c++, и помогать на форуме с HTML)

13.06.2010, 17:18	#4
Magneto Форумчанин Регистрация: 10.02.2008 Сообщений: 178	Sensizu - Ваш способ абсолютно не решает проблему.

14.06.2010, 16:06	#7
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	Пора бы дивами верстать))) webinmd.com

14.06.2010, 16:34	#8
Sensizu Otsukitakitte Форумчанин Регистрация: 01.10.2009 Сообщений: 126	да, предыдущий пост не решал проблему.. понал, перечитал. Что думаю: почему бы не поставить в CSS один фон на левую часть (repeat-x), один на правую (repeat-x) и один на середину, где сам сайт (no-repeat). По мне так легче залить всю картинку целяком и кинуть в фон шапки =\ Помог - ставь плюс. $("question").onAnswer(function() { $(this).getItWright(true); });

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
PASCAl ! Найти палиндромом(то есть его запись читается одинаково слева направо и справа на лево )	valerka92	Помощь студентам	4	25.04.2010 12:23
Отступы границ сайта слева и справа	slaxik	HTML и CSS	4	31.01.2010 11:45
Найти числа,которые читаются слева-направо и справа-налево одинаково(например, 1001). Паскаль	NikLik	Помощь студентам	8	22.11.2007 23:00