Проблема с фоном, он размножается, как исправить?

голоса: 0

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

Вот мой экран:

image

А вот моего друга:

image

Вообщем всё понятно, вот стили моего фона:

body {margin:0;padding:0; background:url('/block/fon13.jpg'); background-attachment: fixed; background-position: center;}

Адрес сайта http://passagestalker.3dn.ru/
| Автор: | Категория: Дизайн сайта
Изменение категории | | Автор: Yuri_Geruk

Ответов: 1

голоса: +2
 
Лучший ответ
Пропишите так...
body {margin:0;padding:0; background:url('/block/fon13.jpg') no-repeat #000; background-attachment: fixed; background-position: center;}
| Автор:
Выбор ответа лучшим | | Автор: Vladislav Tashlanov
Извините, но фон по центру, а всё остальное чёрное, это всё видно...
Vladislav Tashlanov,
Тогда нужно перерисовывать картинку, сейчас она 1520х638
Sentimo,
Мне делать на 4000х1300 ? Сайт будет нагружать... ужас.
Vladislav Tashlanov,
Зачем? 1920х1080 будет как раз, и правильном сжатии и качество не потеряется и размер будет в кб.

Не обязательно, достаточно сделать двойной background с прозрачным фоном во втором случае.

Для это в CSS:

html{background:url('заполняющий-фон.png') repeat} body{background:url('/block/fon13.jpg') no-repeat fixed top center;margin:0;padding:0;height:100%;width:100%}

Где заполняющий-фон.png для тега <html> - изображение которое повторяется и стоит позади основного фона (твоей картинки). Да, картинку придётся рисовать самому, как вариант можешь использовать туже сетку.

А фон для тега <body> стоит картинкой не повторяющейся, вверху, по центру, прозрачный и фиксирован.

В противном случае, да, придётся использовать картинку размером 7680 x 4800 (сейчас это максимальный размер, который я знаю).

Но как показывает практика, в основном фоновое изображение затемняют к краям, чтобы добавить обычную заливку простым цветом (как тут).

...