Html подогнать фон страницы под размер экрана. Адаптивные фоновые изображения

Размер видимого фрагмента слоя любого графического документа Photoshop одинаков с размером всего искомого холста документа. Следовательно, изменить его можно просто поменяв размер исходного документа. Но в Фотошопе еще есть стандартные инструменты для редактирования размера фрагмента. Для того, чтобы самостоятельно научится менять размер фрагмента вам понадобится открыть в Photoshop файл, в котором несколько фрагментов.

Инструкция

Изменить масштаб любого объекта в файле можно при помощи команды Free Transform, она находится в меню Edit либо использовать опцию Scale, найти ее можно в этом же меню в списке Transform. Выбрав одну из вышеуказанных опций, потяните за край рамки в котором находится изменяемый объект. Если при изменении масштаба слоя вам необходимо сохранить пропорции размера объекта, во время растяжения либо сжатия удерживайте нажатой клавишу Shift. Для сохранения размера нажмите Ввод на клавиатуре.
В некоторых случаях размер изображения на одном из слоев может быть больше, чем размер основного фона документа. В таком случае границы фона этого изображения будут выходить за рамки всего документа. Чтобы увидеть границы этого фона нужно воспользоваться инструментом Navigator и с помощью его уменьшить масштаб всего документа, до тех размеров, при которых будут видны границы большего объекта.
Если вам нужно установить конкретный размер слоя, нужно вручную ввести необходимые данные в поля значений трансформации. Чтобы независимо друг от друга изменить высоту и ширину объекта введите данные о высоте в графу H, а о ширине в графу W. Данные вводятся в процентах от исходных размеров. Для того, чтобы размер менялся пропорционально исходному, нужно в панели настроек включить опцию Maintain aspect ratio.
В случае, если картинка, размер которой нужно изменить, находится на главном фоне, следует разблокировать изображение. Для этого используется функция Layer from Background. Найти ее можно в меню Layer, либо просто дважды щелкните по слою. Далее размер меняется так же, как и в случае, описанном выше.
Если вам нужно изменить размеры нескольких изображений, находящихся на разных слоях с сохранением исходных пропорций. Тогда просто выделите необходимые объемы удерживая клавишу Ctrl.
Далее следует воспользоваться функцией Image Size либо Canvas Size, находятся они в меню Image. При использовании первой опции изменится масштаб объектов на всех слоях. При второй опции будет изменен размер корректировочных слоев, а также слоев, содержащих заливку. Остальные слои останутся без изменений.

Во время изменения масштаба изображения в Фотошопе, изменяется масштаб всех слоев, из которых состоит документ. Эту опцию можно найти в разделе «Изображение». В случае, когда вам нужно изменить размер не всего документа, а конкретного слоя, то нужно пользоваться функциями раздела «редактирование».

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

Body { background: #000 url(myBackground_1280x960.jpg) » center center fixed no-repeat; }

Пример 1 показывает отцентрированное фоновое изображение 1280px X 960px , где видимая область зафиксирована (то есть она не прокручивается вместе с документом).

Но какого размера необходимо изображение? Мониторы и операционные системы развиваются достаточно быстро, и как результат мы имеем большой диапазон экранных разрешений. Наиболее популярные разрешения сегодня: 1024x768px , 1280x800px , 1280x1024px , и 1440x900px . Однако с появлением HD мониторов и профессиональных дисплеев, которые поддерживают разрешение до 2560x1600px , вариантов становится еще больше.

Существует также много случаев, где необходимо низкое разрешение. Многие пользователи уменьшают окно своего браузера с целью освободить пространство экрана для других целей, в то время как ряд мониторов держит разрешение в 800x600px . Также не будем забывать о возрастающей роли карманных компьютеров.

Вместо того чтобы использовать одно фиксированное изображение определенного размера, не лучше ли будет масштабировать изображение в зависимости от размеров окна? К сожаления, CSS 2.1 не дает возможности масштабировать фоновое изображение.

Существует несколько искусственных приемов, однако все они полагаются на элемент HTML img (вместо фона в CSS). Также в этих способах используют абсолютное позиционирование для слоев или таблиц или скрипты, позволяющие изменять размеры изображения. К тому же не все из этих методов сохраняют пропорции изображения, растягивая изображения совершенно нереалистично.

Спасают положение CSS3 фоны

W3C CSS определяет свойство background-size , которое отвечает нашим запросам.

Интересные значения:

Contain

Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока .

Cover

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

Contain В этом случае изображение полностью поместится в браузере , опуская (скрывая) непрозрачные поля у верхней-нижней или левой-правой стороны, когда пропорции у фонового изображения и окна браузера не совпадают (в примере образуются пустое черное пространство). В результате изображения выглядит "обрезанным ". В примере 2 код примера 1 был дополнен свойством background-size со значением Contain .

Cover . В этом случае изображение полностью заполнит смотровое окно , при этом в процессе будут отрезаны «уши» или «волосы» (они уйдут за пределы монитора), но визуально изображение не будет выглядеть "обрезанным". Данный метод я предпочитаю всем остальным. Вы можете контролировать выравнивание изображения внутри окна с помощью свойства background-position . В примере 3 мы снова дополнили код примера 1 , но на этот раз свойством background-size со значением cover .

Вы разрешаете фону масштабироваться, добавив следующий код:

Body { background: #000 url(myBackground_1280x960.jpg) » center center fixed no-repeat; -moz-background-size: cover; background-size: cover; }

Свойство background-size уже поддерживается браузером Firefox 3.6 (используя префикс –moz; Firefox 4 будет использовать свойства CSS3), Chrome 5, Safari 5, and Opera 10.54; и будет включено в Internet Explorer 9. Старший webkit и версии Opera уже поддерживают свойство background-size , однако их реализация основана на предыдущих проектах, которые не включают ключевые слова Contain и Cover .

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

Добавим CSS3 media queries

Модуль (W3C CSS3 Media Queries Module) привнесет условные правила, которые обеспечат условный порядок при ранжировании высоты и ширины фона. Это позволит нам осуществить масштабирование фона от минимальной ширины/высоты и выше. Media queries поддерживается Firefox 3.5, Chrome, Safari 3, Opera 7 и также будет включен в Internet Explorer 9.

Следующие стилевые правила скажут браузеру о том, что нельзя масштабировать фоновое изображение по доститжению размеров 1024x768px .

Body { background: #000 url(myBackground_1280x960.jpg) » center center fixed no-repeat; -moz-background-size: cover; background-size: cover; }
@media only all and (max-width: 1024px) and (max-height: 768px) { body { -moz-background-size: 1024px 768px; background-size: 1024px 768px; }
}

Примечание, 1024x768px имеет те же пропорции, что и фоновое изображение (1280x960px ). Когда применяют различные соотношения (пропорции) можно получить внезапный скачок при уменьшении окна браузера.

В наших финальных примерах, четыре и пять , добавлены @media правила, таким образом, наше фоновое изображение не масштабируется ниже 1024 X 768 пикселей. Пример пять показывает, что если у свойства background-position значение равно left-bottom вместо center-center , мы можем контролировать способ выравнивания фонового изображения в пределах окна браузера.

background-position значение равно left-bottom.

Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то оригинальные фишки и нюансы для сайтов. Одним из подобных «направлений» является использование фона (backgorund), который растягивается на весь экран по ширине и высоте. Что-то вроде около года назад или больше я рассказывал — изображение помещалось в шапку блога и плавно «переходило» в основной фоновый цвет веб-страницы. При желании можно даже добавить .

Размещение в качестве бекграунда большой масштабируемой картинки — это что-то новое и более сложное занятие, решение которого нашел в этой статье .

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

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

Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.

Замечательное, простое и прогрессивное решение с помощью CSS3

Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.

html { background : url (images/bg.jpg ) no-repeat center center fixed ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size : cover; }

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Решение поддерживают почти все популярные в сети:

Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
Chrome Whatever+
IE 9+
Safari 3+

Некий Goltzman нашел решение, которое позволяет работать хаку в IE

filter : progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg" , sizingMethod= "scale" ) ; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")" ;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")";

Но внимание!!! при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.

CSS -хак номер 1

Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент , который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.

img.bg { /* Set rules to fill background */ min-height : 100% ; min-width : 1024px ; /* Set up proportionate scaling */ width : 100% ; height : auto ; /* Set up positioning */ position : fixed ; top : 0 ; left : 0 ; } @media screen and (max-width : 1024px ) { /* Specific to this particular image */ img.bg { left : 50% ; margin-left : -512px ; /* 50% */ } }

img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Работает в любых версиях качественных браузеров — Safari / Opera / Firefox и Chrome. Для IE как всегда есть свои нюансы:

IE 9 — работает;
IE 7/8 — чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
IE 6 — можно настроить, но кому вообще нужен этот браузер.

CSS -хак вариант 2

Еще один вариант решения задачи с помощью CSS стилей это разместить встроенное изображение на странице с фиксированной позицией в левом верхнем углу, после чего задать для min-width и min-height значение 100% сохраняя пропорции.

#bg { position : fixed ; top : -50% ; left : -50% ; width : 200% ; height : 200% ; } #bg img { position : absolute ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; margin : auto ; min-width : 50% ; min-height : 50% ; }

#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }

Хак работает в:

Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
IE 8+
Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.

Метод с jQuery

Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше — можно указать только height = 100% для заполнения всего окна.

Доступ ко всем данным идет через JavaScript, коды используются следующие:

#bg { position : fixed ; top : 0 ; left : 0 ; } .bgwidth { width : 100% ; } .bgheight { height : 100% ; }

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

По моему, центрирование в этом случае не производится (насколько я понял), но его можно сделать. Поддерживается большинство десктопных браузеров, в том числе IE7+. Напоследок автор статьи про хаки подготовил набор файлов примеров, в которых это все реализована — скачать можно . В комментариях к статье-оригиналу также содержится некоторая информация и обсуждение, хотя большинство важных деталей автор добавлял в виде апрейтов к посту и у меня он также переведены и указаны. Конечно, разобраться во всем этом помогут и примеры. В целом, если бы не постоянные «приколы» от IE7 все упомянутые хаки были бы идеальными.

P.S. Хотите купить книгу? — не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть — выбрать, оплатить и оформить доставку на дом.

От автора: В этой обучающей статье мы рассмотрим простую технику создания фонового изображения, которое будет полностью растягиваться на всю ширину окна просмотра (viewport) браузера. Для этого нам понадобится CSS-свойство background-size; JavaScript не нужен.

Примеры адаптивных целых фоновых изображений

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

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

Базовые принципы

Вот наш план действий.

Используйте свойство background-size, чтобы полностью заполнить окно просмотра

CSS-свойство background-size имеет значение cover. Значение cover сообщает браузеру о том, что необходимо автоматически и пропорционально масштабировать ширину и высоту фонового изображения, чтобы они всегда были равны или были больше ширины/высоты окна просмотра.

Используйте медиа-запрос для обработки небольших фоновых изображений для мобильных устройств

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

Изображение, которое я использовал в демо-примере, имеет разрешение 5500x3600px. Этого разрешения хватит для большинства широкоформатных компьютерных мониторов, имеющихся в настоящее время в продаже. Но ради этого придется обрабатывать файл размером 1.7MB.

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

HTML

Для разметки потребуется только это:

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

Тем не менее, эта техника будет также работать для любого блочного элемента (например, div или form). Если ширина и высота вашего блочного элемента является «резиновой», тогда фоновое изображение всегда будет масштабироваться таким образом, чтобы занять весь контейнер.

CSS

Задаем следующие стили для элемента body:

body { /* Путь до изображения */ background-image: url(images/background-photo.jpg); /* Фоновое изображение всегда отцентрировано по вертикали и горизонтали */ background-position: center center; /* Фоновое изображение не повторяется */ background-repeat: no-repeat; /* Фоновое изображение зафиксировано в окне просмотра, поэтому оно не смещается, когда высота контента больше высоты изображения */ background-attachment: fixed; /* Вот что позволяет фоновому изображению подстраиваться под размер контейнера */ background-size: cover; /* Устанавливает фоновый цвет, который будет отображаться, пока загружается фоновое изображение */ background-color: #464646; }

body {

/* Путь до изображения */

background - image : url (images / background - photo . jpg ) ;

/* Фоновое изображение всегда отцентрировано по вертикали и горизонтали */

/* Фоновое изображение не повторяется */

background - repeat : no - repeat ;

/* Фоновое изображение зафиксировано в окне просмотра, поэтому оно не смещается, когда высота контента больше высоты изображения */

/* Вот что позволяет фоновому изображению подстраиваться под размер контейнера */

background - size : cover ;

/* Устанавливает фоновый цвет, который будет отображаться, пока загружается фоновое изображение */

background - color : #464646;

Наиболее важная пара свойство/значение, на которую следует обратить внимание:

background-size: cover;

background - size : cover ;

Вот, где начинается волшебство. Эта пара свойство/значение сообщает браузеру о том, что нужно масштабировать фоновое изображение пропорционально, т.е. чтобы его ширина и высота были равны или были больше, чем ширина/высота элемента (в нашем случае это элемент body).

Однако у данной пары свойство/значение есть одна проблема: если фоновое изображение меньше размеров элемента body – что произойдет на экранах с высоким разрешением и/или когда у вас огромное количество контента на странице – браузер неизбежно увеличит масштаб изображения. И, как мы знаем, когда мы увеличиваем размеры растрового изображения, качество изображения снижается (другими словами, происходит пикселизация).

Увеличение размера изображения относительно исходных размеров сказывается на качестве изображения. Помните об этом, когда будете выбирать подходящее изображение. В демо-примере используется огромная фотография размером 5500x3600px для широкоформатных мониторов, поэтому потребуется очень большой экран, чтобы произошло искажение качества. Давайте двигаться дальше. Чтобы фоновое изображение всегда было по центру окна просмотра, мы пропишем:

background-position: center center;

background - position : center center ;

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

В данном случае нам необходимо сделать так, чтобы фоновое изображение оставалось на исходном месте, даже когда пользователь прокручивает страницу вниз. В данной ситуации изображение либо просто закончиться при прокрутке, либо будет перемещаться по ходу прокрутки (что может сильно отвлекать пользователя). Чтобы зафиксировать фон, мы указываем для свойства background-attachment значение fixed.

background-attachment: fixed;

background - attachment : fixed ;

В демо-примере я добавил возможность «подгрузить контент», чтобы вы могли посмотреть, что происходит при появлении полосы прокрутки в браузере, когда для свойства background-attachment задано значение fixed. Вы также можете загрузить демо-пример и поиграть со значениями свойств, отвечающих за расположение элементов (например, background-attachment и background-position), чтобы посмотреть, как это повлияет на прокрутку страницы и фоновое изображение. Остальные значения свойств сами по себе довольно понятны.

Сокращенная запись CSS

Я подробно расписал фоновые свойства, чтобы их было легче объяснить. Равнозначной будет и сокращенная запись:

body { background: url(background-photo.jpg) center center cover no-repeat fixed; }

body {

background : url (background - photo . jpg ) center center cover no - repeat fixed ;

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

Дополнительно: медиа-запрос для маленьких экранов

Для маленьких экранов я использовал программу Photoshop, чтобы пропорционально уменьшить исходное фоновое изображение до размера 768x505px, а также я воспользовался сервисом Smush.it для того, чтобы еще немного уменьшить размер. Благодаря этому размер файла уменьшился с 1741KB до 114KB. Т.е. размер изображения уменьшился на 93%.

Пожалуйста, не поймите меня неправильно, 114KB это все еще довольно много для чисто эстетического элемента дизайна. Учитывая дополнительную нагрузку в 114KB, я бы стал использовать такой файл, только если бы увидел возможность значительно улучшить опыт взаимодействия пользователя с сайтом (UX), т.к. в настоящий момент значительная доля Интернет трафика приходится на работу мобильных устройств background - image : url (images / background - photo - mobile - devices . jpg ) ;

У медиа-запроса установлено ограничение по ширине max-width: 767px, которое означает, что если окно просмотра браузера больше 767px, то будет загружаться большое фоновое изображение.

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

Вдобавок к этому, из-за того, что некоторые устройства с маленьким экраном могут отображать большее количество пикселей – например, iPhone 5 c дисплеем retina способен отобразить разрешение 1136x640px – маленькое фоновое изображение будет пикселизовано.

Подводя итог

Вы можете посмотреть более актуальную версию исходного кода из данной обучающей статьи на GitHub . Я могу вас предупредить только об одном: пожалуйста, используйте данную технику с осторожностью, потому что большие файлы могут серьезно повредить UX, особенно если конечный пользователь использует медленное и ненадежное Интернет соединение. Это еще одна причина, почему вам следует подобрать подходящий цвет фона, чтобы пользователь смог прочитать контент, пока фоновое изображение загружается.

Одним из наиболее часто используемых при верстке сайтов css-свойств является свойство фона элемента страницы (background). Сегодня мы поговорим с Вами о том, как можно изменять размеры фонового изображения при помощи .

В более старой версии CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняла свои фиксированные размеры. Изменить размеры фоновой картинки было нельзя. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат.

Есть несколько способов определения размеров - .

Абсолютное изменение размера

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

Заполнение фоном

Свойство background-size также понимает ключевое слово cover. Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.

: cover;

Масштабирование нескольких фонов

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

background : url ("sheep.png" ) 60% 90% no-repeat , url ("sheep.png" ) 40% 50% no-repeat , url ("sheep.png" ) 10% 20% no-repeat #393 ; : 240px 210px , auto , 150px ;

Все последние версии браузеров поддерживают свойство background-size.

Заключение

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

Не забудьте подписаться на обновления блога , чтобы не пропустить новые интересные статьи.