Проблема с фоном на 1920х1080

[cyberg]

Подскажите, что нужно указать в коде, чтобы получилось вот так:

4f9c332f9a64.jpg

Мой форум вот такой сейчас:
khkl.tforums.org/index.php?sid=218f5f2a99664861f8383e175c30b5eb
При открывании его на разрешении 1920 на 1080, центральная часть форума встает по центру экрана, а изображение перекрывается вот так:
[фото пропало]



Правлю данный код:

Код: Выделить всё

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Verdana", Verdana, Helvetica, Arial, sans-serif;
	color: ;
	background-color:#CCE3F3;
       background-image: url([b][color=#FF0000]http://khkl.tforums.org/images/ranks/khkl_tforums_org/fon-2.jpg[/color][/b]);
	background-repeat: no-repeat;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 15px auto;
}

[Warlock75]

Какой фоновый рисунок? Выложите

[cyberg]

http://khkl.tforums.org/images/ranks/kh ... /fon-2.jpg
само изображение

[Warlock75]

Нужно другую картинку и сделать так, чтобы фон позиционировался по середине. У вас он прижат к левому краю и при увеличении разрешения форум сдвигается вправо, поэтому косяк. Кстати, а как быть, если ширина больше, чем 1920?)))) У меня там просто белое поле) Подумайте и над этим. Я бы сделал хоккеистов поменьше и разрешил повторять изображение по X.
Изучать тут: http://htmlbook.ru/css/background-position

[cyberg]

Я понимаю, что другую можно сделать, сразу готовую 1920х1080, а как быть при том, когда монитор 1280х1024, 1280х960 и т.д.??

[Warlock75]

А как быть, если монитор 2560х1440?
Поэтому и говорю, хоккеистов поменьше и повторяющийся фон.

Добавлено спустя 1 минуту 14 секунд:
Картинка не резинка и не может подстраиваться под разрешение. Значит нужно сделать так, чтобы было приемлемо на любом.

[Пчелкин]

А лучше картинку поменьше и плавный переход в заливку блока шапки...

[cyberg]

Покажите пожалусйта , как выглядит у Вас данный сайт на разрешении 2560х1440
http://avalanche.nhl.com/?navid=nav-teamnav-col

Добавлено спустя 18 минут 33 секунды:
У меня другой вопрос по оформлению:
1. допустим я возьму верхним фоном, градиент, который имеется высотой 400 пикселей, фон задний у всего сайта будет подобран по цвету. Растяну верхний градиент по оси х.
2. Если нарисовать игроков в формате png без фона (прозрачный фон), можно ли будет контролировать положение их на основном фоне, чтобы они только двигались относительно оси-х , когда будет меняться разрешение мониторов?

[Nekstati]

Код: Выделить всё

body {
	background-position: center top;
}

Таким образом вы центрируете картинку. Далее эту картинку можно просто расширить до ≈2560 пикс., хоккеистов разместив посередине. Но лучше, как писали выше, хоккеистов отдельно, фоном для body, а градиент на всю ширину экрана — отдельно, фоном для html.

Код: Выделить всё

html {
    background: url(картинка) repeat-x;
}

Покажите пожалусйта , как выглядит у Вас данный сайт на разрешении 2560х1440

Ctrl и минус или Ctrl и колесо мыши.

чтобы они только двигались относительно оси-х , когда будет меняться разрешение мониторов?

Куда им двигаться? Они должны стоять по бокам форума, то есть по центру блока.

[cyberg]

На том примере, что я показывал:
http://avalanche.nhl.com/?navid=nav-teamnav-col
при увеличении и уменьшении мышкой, видно, что цвета фона - черный, картинка всегда центруется относительно телу сайта.
Так и не понял, как сделать мне тоже самое?

[Nekstati]

Для body задан фоновый чёрный цвет и фоновая картинка по центру, которая по краям плавно перетекает в чёрный цвет.
http://avalanche.nhl.com/v2/ext/backgro ... 010_11.jpg

Код: Выделить всё

body {
    background: #01020D url("image.jpg") center top no-repeat;
}

[cyberg]

Ничего не получается((((

[Nekstati]

Что именно не получается?

Открываете styles/AeroBlue/theme/stylesheet.css.

Код: Выделить всё

body {
	...
	...
	background-color: #cce3f3;
	background-image: url('./images/bg.gif');
	background-repeat: repeat-x;
	...
	...
}

Заменяете эти три строки, отвечающие за фон. Прописываете тут новый цвет фона (чёрный), путь к вашей новой фоновой картинке, указываете её расположение по центру:

Код: Выделить всё

	background-color: #01020D;
	background-image: url('./images/ваша_картинка.gif');
	background-repeat: no-repeat;
	background-position: center top;

Или то же самое одной строкой:

Код: Выделить всё

	background: #01020D url('./images/ваша_картинка.gif') center top no-repeat;

Рисуете картинку, кладёте её в папку styles/AeroBlue/theme/images. Идёте в админку → Стили → Темы → AeroBlue → Обновить. Наконец, нажимаете в браузере кнопку «Обновить».

[cyberg]

Так мне не нужен черный цвет фона.
Фон должен быть голубым+ градиент по оси Х растянут поверху.
И картинка по краям границ тела форума. Получается два фона картинками+ фон цвета голубого (таблица цвета)

[Nekstati]

Так мне не нужен черный цвет фона.

На том примере, что я показывал:
http://avalanche.nhl.com/?navid=nav-teamnav-col
при увеличении и уменьшении мышкой, видно, что цвета фона - черный, картинка всегда центруется относительно телу сайта.
Так и не понял, как сделать мне тоже самое?

Вы уж определитесь для начала, какой вам нужен цвет.

Фон должен быть голубым+ градиент по оси Х растянут поверху.
И картинка по краям границ тела форума. Получается два фона картинками+ фон цвета голубого (таблица цвета)

Голубой фоновый цвет и картинку-градиент задаёте для html:

Код: Выделить всё

html {
    background: #CCE3F3 url('./images/blue_gradient.gif') repeat-x;
}

Вторую картинку ставите фоном для body по центру:

Код: Выделить всё

body {
    background: url('./images/guys_with_bandies.png') center top no-repeat;
}