CSS фоновое изображение

Question

Я работаю над проектом для художника, проект был передан мне, так как дизайн был завершен. Я получил дизайн в файле .psd, а его размер - huuuuuuuge 2504px x 1781px, если быть точным!

Поскольку на нем много узоров и градиентов, я немного не уверен, как настроить изображение. Я разместил изображение в Интернете, и я думаю, что в первую очередь необходимо изменить его размер, чтобы он соответствовал более современным размерам экрана.

Изображение прилагается, Любая помощь или предложения о том, как управлять изображением высоко ценится.

Приветствия

Answer 1

Для какого разрешения предназначен сайт?

Я обнаружил, что изменение размера изображения до ширины 1280px (высота 911px) прекрасно работает для размера окна браузера 1024x768, что является минимальным значением, которое кто-либо собирается использовать в эти дни.

С этим CSS:

body {
    background-image: url('/path/to/your/background.png');
    background-position: left bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #000000;
}

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

Однако: Любой, у кого браузер с разрешением выше 1280 пикселей, увидит простой черный цвет фона.

Редактировать: Также имеется свойство CSS3 background-size: 100%;, которое автоматически сжимает / растягивает изображение в соответствии с окном просмотра браузера.

Обновление: Я обнаружил, что PNG-8 дал мне лучшее качество по сравнению с размером файла для разрешения, которое я упомянул выше. Его размер составил 280 КБ, тогда как JPG сопоставимого качества находился в диапазоне 330 КБ.

Answer 2

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

Я бы, вероятно, сделал несколько версий изображения (разных размеров) и использовал бы методы html5 и / или javascript, чтобы предоставить посетителю правильное изображение.

Я бы не использовал его в качестве фонового изображения, но поместил бы его в div позади остального содержимого, чтобы я мог масштабировать этот div и изображение до 100% ширины. Расположение его в нижнем левом углу должно сделать наиболее важную часть (рамку) всегда хорошо видимой.

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

Answer 3

Вы можете разделить (в «старом стиле») изображение на части (например, в заголовке, правом столбце, нижнем колонтитуле) и использовать их в качестве фоновых изображений для элементов div. Я предлагаю использовать встроенные функции Photoshop «Сохранить для веб-сайтов», чтобы оптимизировать изображение (в формате Jpeg), чтобы получить наилучшее соотношение «маленький файл - лучший внешний вид» (что-то вроде среднего (50 или 60) качества, многократного отжимания и 1000 ширина в пикселях). Это если вы хотите сохранить фиксированный макет ..

Answer 4

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

Макет около 1000 пикселей * 700 пикселей хорошо работает на большинстве компьютерных дисплеев.

Если вам нужна гибкая компоновка, было бы очень хорошо, если бы вы могли разделить компоненты изображения (у вас есть все слои?). то есть рамка / люди, красные цветочные узоры углов и фон со скрещенными полосами.

Затем используйте несколько элементов div и немного javascript, чтобы рамка и стрелки оставались заблокированными в положении относительно нижнего левого угла, цветочные узоры всегда тяготеют к четырем углам, а фон перемещается так, чтобы держать рамку в темной диагонали площадь; вид скольжения вверх и вправо вдоль красной полосы. (Я вижу это в моих мыслях, но это трудно описать.)