Как сделать фон к веб-странице

Аватар пользователя Paolo_Cocoa

Хочу сделать фотографию фоном веб-странички. Если использовать <body background="pic.jpg"> , то картинка несколько дублируется на экране (получается tile). А мне хотелось, чтобы она или растягивалась на весь экран или показывалась только один раз - в центре. Как бы такое организовать?

3.75
Ваша оценка: Нет Средняя: 3.8 (4 оценок)

Страницу организуйте в виде таблицы. Одной из клеточек задайте размеры Вашей фотографии. И сделайте её фоном этой ячейки.

2.833335

Valeriy. < END OF TEXT>

Аватар пользователя Paolo_Cocoa

А у меня не влезает содержимое страницы в такую маленькую клеточку :( Выход, конечно, есть - масштабировать вручную фотографию до размеров клетки, но это мне кажется каким-то кривым путем. Может есть что по-прямее?
.
__________
The Ultimate answer to Life, the Universe and Everything

2.333335

Искренне ваш, К.О.

Это надо делать с помощью CSS

body {
background-image: url(images/yourpicture.jpg);
background-repeat: no-repeat;
background-position: center center;
}
I.e:
http://www.bestcatalog.net/smpl/sample.htm //Смотри код

background-position: center center;можно сделать и background-position: left top; тогда картинка будет выравнена по левому верхнему углу браузера

5

Вы можете задать ширину и высоту каждого столбца и строки. Делаете таблицу 3x3. Рисунок в центр. Центральную клетку выставляете размером рисунка и лепете фоном туда рисунок. Размер крайних клеток вычисляете плавающим (напр. в процентах) в зависимости от разрешения монитора ползователя (можно через Java Script).

Вообще, слелайте свою страничку в word. И сохраните как html и не мучтесь подробностями.

5

Valeriy. < END OF TEXT>

Аватар пользователя Kwаk

Текст поверх картинки потом получается плохочитаем.
Лучше просто заливочку однотонную или с небольшой цветовой градацией.

С уважением, Ефрейтор.


5
Аватар пользователя Paolo_Cocoa

Здорово, получилось! Буду играть дальше
.
То, что картинки для фона - не камильфо, я вижу, но ведь цвета буковок в моем распоряжении, можно подобрать как надо.
.
Вот для сравнения две страницы, скажите, что вам больше нравится
.
http://www.geocities.com/paolo_cacoa/Canada/Toronto/toronto.htm .
http://www.geocities.com/paolo_cacoa/Canada/Toronto/toronto_b.htm .
.
На подписи не обращайте внимания, это потом исправится
__________
The Ultimate answer to Life, the Universe and Everything

5

Искренне ваш, К.О.

Первый нравиться. Цель web странички - понравиться, быть удобной пользователю. Ошибка многих начинающих в том что они начинают извращатся в своём Я, забывая о целях странички.  Вот пример - http://belgweb.com/ Ничего лишнего, никаких наворотов. Всё под рукой. Дизайн не давит. Т.е. всё направлено на удобство пользователя.

5

Valeriy. < END OF TEXT>

Аватар пользователя Paolo_Cocoa

Потому и спрашиваю, что сайт ведь для других. Спасибо! Буду проще :)
.
__________
The Ultimate answer to Life, the Universe and Everything

5

Искренне ваш, К.О.
Аватар пользователя Kwаk

Больше нрвится вот эта.
http://www.geocities.com/paolo_cacoa/Canada/Toronto/toronto.htm .
И потом про вес странички тоже не надо забывать. Если уж совсем не вмоготу и хочется на бекграунд прилепить красявость. То можно использовать меленькие повторяющиеся картинки, типа кирпичной стены или капель воды на стекле. Но только не такую здоровую фотку как в твоем варианте.
С уважением, Ефрейтор.


5
Аватар пользователя Paolo_Cocoa

Спасибо за критику! Я все так и сдалаю, как вы советуете. Кстати, Канадский сайт обновился, покритикуйте, а то я не знаю, куда двигаться
.
__________
The Ultimate answer to Life, the Universe and Everything

5

Искренне ваш, К.О.
Аватар пользователя bride

Paolo, в любом дизайне сначала надо определить приоритеты для себя и зрителя соответственно.

Про фон...

Если цель - красиво подать фотки, то на них и надо делать акцент.
Соответственно, задником лучше давать не фото, а спокойный одноцветный фон, и надо учитывать то, что фотки могут быть не однородные по цвету, тогда надо смотреть какой-то усреднённый относительно всех фоток фон, или оставить его белым. Неплохо смотрится серый 10-20% от чёрного, не более. Слишком тёмный фон утяжеляет страницу и прибавляет ей ненужного веса. (На Вашем сайте я бы немного ослабила фон, посветлее, поскольку красный шрифт не очень читабелен, видимо совпал по тону с фоном.)

Ещё вариант. Если всё-таки хочется дать фоном фотографию, то можно подать её сепией или монохромную, но где-то на 50% сделать её бледнее относительно основных фоток. Также надо учесть, что если сюжет фоновой картинки крупный, то за основными фотками не будет проглядываться.

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

Про расположение фоток и текста...

Применяйте единую выключку для всех объектов, то бишь, если по центру, так все по центру во всех рядах (см. http://www.geocities.com/paolo_cacoa/Canada/canada.htm). Если к левому краю прибито, то все к левому...

Ещё несколько замечаний, на мой взгляд, по страничке (http://www.geocities.com/paolo_cacoa/Canada/canada.htm):
- отцентрировать, как говорила выше
- первую фотку во втором ряду я бы убрала - она не в формате и не настолько показательна, ей можно пожертвовать
- откалибруйте все картинки в один формат и старайтесь их выстраивать в ряд в одной ориентации, либо горизонтальные, либо вертикальные, либо, вводите чередование для единого ритма горизонтальных и вертикальных (см. http://www.geocities.com/paolo_cacoa/Canada/canada.htm)

А в остальном, прекрасная Маркиза, всё хорошо, всё хо-ро-шо...

По фоткам видно, что места очень красивые, спасибо за экскурсию...

Ждёмc продолжения...

_____
Бридя

5

/

Аватар пользователя Paolo_Cocoa

Спасибо! Я постараюсь все подправить. Правда, я не совсем понял, про какие странички сказано - может не ссылкой, а просто словами?
.
Простите за то, что Yahoo так трафик обрубает, надо куда-нибудь переехать.

И вот ведь еще засада. Я как ненормальный пишу странички, а ведь Picasa, которой я пользуюсь для упорядочивания фоток и для их масшабирования, может это все делать сама. Ужасно, кстати, удобная программка, всем советую, у кого есть много фотографий на диске http://www.picasa.com

.
__________
The Ultimate answer to Life, the Universe and Everything

5

Искренне ваш, К.О.
Аватар пользователя bride

Да, все ссылки ведут на одну страницу...

Словами: имела в виду страничку "Toronto city" - там я бы убрала первую фотку во втором ряду как выбивающуюся из общей строки по ориентации
и страничку "1000 Islands Parkway" - там фотку в третьем ряду отцентрировать по отношению к верхним.

По фону и тексту - замечания в этих страничках тоже.

_____
Бридя

5

/

Аватар пользователя Paolo_Cocoa

А подскажите еще про веб. Что надо писать чтобы кодировка правильно браузером определялась?
.
Потому что фотографии на сайте выложил все, а вот с подписями к ним - беда. Браузер показывает их сранными значками. Это лечится принудительным переходом к нужной кодировке, а хочется, чтобы он сам это делал

.
__________
The Ultimate answer to Life, the Universe and Everything

5

Искренне ваш, К.О.
Аватар пользователя almor

Вот так:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
PS. Вставить это надо в <HEAD>

5

Мама, я вернулся. :D


Аватар пользователя Paolo_Cocoa

Ага, заработало! Спасибо, а то picasa по умолчанию ставит charset=iso-8859-1.
__________
The Ultimate answer to Life, the Universe and Everything

5

Искренне ваш, К.О.
Аватар пользователя Paolo_Cocoa

В Unix/Linux есть программка, которая находит во всех указанных файлах нужную строку и меняет ее на другую строку. Это очень удобно, если я хочу перенести все картинкина другой сервер, а сами html-файлы оставить на старом месте. Тогда мне не надо редактировать кучу файлов, а надо просто один раз запустить эту программку с нужными параметрами.
.
А нет ли такой утилитки под Windows, чтобы не переность файлы туда-сюда по 3 раза?


__________
The Ultimate answer to Life, the Universe and Everything

5

Искренне ваш, К.О.
Аватар пользователя almor

для правки на сервере ни чего не посоветую.
А для локальной, http://notepad-plus.sourceforge.net/uk/site.htm .
Прога бесплатна. Нужная Вам функция работает так: открываете файлы, нуждающиеся в редактировании (открываются в одном окне (multitab)), в меню есть пункт "Replace", и в открывшемся окне пишем, что на что меняем и жмем кнопку "Replace all in all opened documents".

5

Мама, я вернулся. :D


Аватар пользователя Paolo_Cocoa

Спасибо! Попробую. Конечно, я буду править локально, на сервере править сразу кучу файлов - это кто ж мне даст :)

Класс, все работает!

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


__________
The Ultimate answer to Life, the Universe and Everything

5

Искренне ваш, К.О.