Html background image в размер экрана: Как изменить размер фоновой картинки через CSS3

Как изменить размер фоновой картинки через CSS3

Оригинал: sitepoint.com/css3-background-size-property

Перевод: Влад Мержевич

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

Есть несколько способов определения размеров — взгляните на демонстрационную страницу background-size.

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

Могут применяться единицы измерения.

background-size: ширина высота;

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

background-size: 100px 200px;

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

background-size: 100px;
  /* аналогично */
background-size: 100px auto;

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

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

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

background-size: 50% auto;

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

Масштабирование до максимального размера

Свойство background-size также понимает ключевое слово contain. Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

background-size: contain;

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

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

background-size: cover;

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

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

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

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

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

Просмотр демонстрационной страницы с background-size.

CSS3фон

CSS по теме

• background-size

Статьи по теме

• Как изменить размер фоновой картинки через CSS3
• Как растянуть фон на всю ширину окна?
• Масштабирование фона

css background растянуть на весь экран

Здесь как можно подробнее разберем. как можно реализовать фон (background) интернет ресурса, что должен покрывать все рабочее пространство. Основном все делается на CSS3, также можно подключить jQuery и даже PHP, но рассмотрим один вариант, который на чистом CSS. Для начало нужно понять или определить, что должно получится. Это безусловно, полноценная заливка окна фоном или изображением, чтоб не было не каких пробелов. Где будем растягивать картинку, так чтоб она смотрелось корректно, так как если идет фон под одним оттенком цвета, с ним легче работать. Не забываем про соответствие картинка на ее пропорций. И обязательно должно получится, что изображение установилось по центру. Что главное, все должно быть максимально кроссбраузерно и понятное дело, без различных махинаций с flash. Содержание Метод CSS3 background CSS3 метод Растянуть background на чистом CSS 1 – Метод 2 – Метод Растянуть background с помощью jQuery Растягиваем background с помощью PHP Наслаждайтесь! Задача Решение Метод CSS3 background Это метод самый распространенный, что может растянуть background на чистом CSS, и все благодаря одному свойству, под названием background-size, что только будет присутствовать в CSS3. Здесь изначально создадим background фиксированным и выставим его по центру, что останется его только растянуть, где подключаем свойства background-size, это все идет под ссылку на фон. В общим ориентируемся с блоком которому присваиваем стили и дописываем в файле стилей этому блоку, следующий код: Как можно заметить, что параметр background, где изначально добавляем путь на картину, где происходит установка положение изображение в соответствие окна экрана. Если разбирать, то значение center и top отвечает за центр и прижатие по всем сторонам, чтоб не было пробелов. Чтоб понятно было, то значение fixed — отвечает за функцию фиксаций. Метод совсем обычный, что применяю постоянно и он меня устраивает на все 100% процентов. Еще один способ : Еще один обычный метод воплотить наверное, вставить картину на страницу. Она станет обладать фиксированную позицию и будет размещена в верхнем левом углу. Мы присвоим ей min-width и min-height 100%. Еще необходимо заблаговременно приготовить картину, в намерении пропорциональности сторон. Здесь как можно заметить, что этот код не центрирует background image, что можно быстро все сделать как нужно, а точнее фиксировать изображение с помощью взятия ее в div. На этом все, здесь представлены не все способы, а те, которые больше пременяют. Также небольшое видео, где все понятно объясняют по как при помощи CSS растянуть фон на весь экран. Давайте определим, что именно мы хотим получить: Полная заливка окна картинкой, без пробелов. Растягивание фоновой картинки, насколько это нужно. Соответствие пропорций картинки. Картинка должна находиться в центре. Это должно быть максимально кроссбраузерно. И без всяких махинаций с flash. CSS3 метод Мы можем растянуть background на чистом css, благодаря свойству background-size которое присутствует в CSS3. Мы будем использовать html элемент, это лучше чем body, так как он всегда будет равен высоте окна браузера. Мы сделаем background фиксированным и поставим его в центре окна, после этого мы его растянем на весь экран с помощью свойства background-size. Кроссбраузерность: Opera 10+ (Opera 9.5 поддерживает background-size но не поддерживает ключевых слов) Также есть вариант решения для IE, только необходимо тестировать. Некоторые вебмастера говорят, что могут возникнуть проблемы из ссылками и скроллингом. Растянуть background на чистом CSS Сделать background на весь экран с помощью чистого CSS кода, можно двумя методами. Не исключение что существуют и другие. 1 – Метод Здесь мы будем использовать элемент img, который будет растянут на все окно, и будет выглядеть одинаково во всех браузерах. Мы установим min-height, который будет заполнять окно браузера по вертикали. Также установим width на 100%, который будет заполнять окно по горизонтали. Мы также установим min-width картинки, таким образом, фон никогда не будет меньше, нежели мы установим. Особо хитрая часть кода, это использование медиа запроса, для предотвращения бага, когда окно браузера будет меньше, нежели картинка фона. А также, комбинированное использование отступа с процентным left. Это позволяет держать background в центре, несмотря ни на что. Кроссбраузерность: Любые версии популярных браузеров: Safari / Chrome / Opera / Firefox IE 6: По крайней мере background остается фиксированным IE 7/8: Множество работ не центрируются на малых размерах, но заполняет экран лучшим образом 2 – Метод Еще один простой способ реализовать это, вставить картинку на страницу. Она будет иметь фиксированную позицию и будет размещена в верхнем левом углу. Мы присвоим ей min- w >height 100%. Также нужно заранее подготовить картинку, в плане пропорциональности сторон. Хотя, этот код не центрирует background image. Поэтому, сейчас мы это исправим… Мы можем фиксировать картинку с помощью взятия ее в div. Кроссбраузерность: Safari / Chrome / Firefox (не тестировалось на более древних версиях) Opera (любые версии) и IE отображают одинаково (плохо позиционируют, не пойму почему) Растянуть background с помощью jQuery Эта идея появилась немного ранее (как альтернатива CSS методу). Если мы будем знать пропорции и размер картинки, мы сможем растянуть background на CSS. Если картинка меньше окна браузера, мы изменим width на 100% для картинки. Если больше, мы можем установить только height 100% и знать, что картинка заполнит все как по ширине, так и по высоте. Мы можем получить доступ к нужным данным с помощью JavaScript. Как и все, я использую фреймверк jQuery. Здесь не реализовано центрирование, но вы с легкостью можете сделать это. Кроссбраузерность: И все другие популярные браузеры Растягиваем background с помощью PHP Собственно, PHP мы можем использовать для одной цели: обработки изображения с помощью GD библиотеки. Ранее я рассказывал о том, как сделать скрипт превью картинок. В этом случае его можно использовать для изменения размера изображения на лету. Но возникает проблема, изображение будет генерироваться при каждом обращении к сайту. Для большого проекта это слишком ресурсоемко. Лучше будет сделать готовые заготовки изображений, соответственно самым популярным разрешениям экранов (1024 x 1280, 1280 x 800…), используя фотошоп это не сложно. В случае, если разрешение экрана будет другим, это единичные случаи, мы подключим скрипт автоматического изменения размера. Он подключается следующим образом: Наслаждайтесь! Это все известные мне способы, как растянуть background на весь экран. Если вы делаете это иначе, будьте добры опишите это в комментариях. Буду рад узнать о новых вариантах растягивания background с помощью css и других техник. Творческих вам успехов! Internet Explorer Chrome Opera Safari Firefox Android iOS 9.0+ 3.0+ 9.6+ 3.1+ 3.6+ 2.0+ 1.0+ Задача Растянуть фоновую картинку на всю ширину окна браузера с помощью CSS3. Решение Для масштабирования фона предназначено свойство background-size , в качестве его значения указывается 100%, тогда фон будет занимать всю ширину окна браузера. Для старых версий браузеров следует использовать специфические свойства с префиксами, как показано в примере 1. Пример 1. Растягиваемый фон HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 1. Рис. 1. Вид фона при уменьшенном размере окна При увеличении размера окна браузера фон также начнёт расширяться, это приведет к ухудшению вида картинки (рис. 2). Рис. 2. Вид фона при увеличенном размере окна Русский

Загружать фоновые изображения в зависимости от размера экрана

Оглавление

• Адаптивный фоновый дисплей не является адаптивным Фоновая загрузка
• Адаптивная загрузка фонового изображения
• Предотвратить загрузку фона скрытого элемента

TLDR: если все, что вас интересует, — это код, чтобы заставить это работать, перейдите в этот раздел и возьмите фрагмент кода.

Отзывчивый фон Отображение Неотзывчивый фон Загрузка

Установка свойства background-size фона в значение «cover» позволяет нам гарантировать, что он полностью покрывает область фона на экране любого размера. Но, поскольку одно и то же изображение загружается независимо от размера экрана, этот параметр действует только с точки зрения отображения изображения, а не с точки зрения загруженного изображения. В результате вы можете загрузить фоновое изображение размером 1400 пикселей на экран мобильного устройства Google Nexus 4.

 
HTML {
  background: url('large_bg.jpg') фиксированный центр без повторов;
  размер фона: обложка;
  -webkit-background-size: обложка;
  -o-background-size: обложка;
  -moz-background-size: обложка;
}
 

Загрузка адаптивного фонового изображения

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

 
Экран @media и (максимальная ширина: 480 пикселей) {
  HTML {
    background: url('small_bg.jpg') фиксированный центр без повторов;
  }
}
Экран @media и (минимальная ширина: 481px) и (максимальная ширина: 900px) {
  HTML {
    background: url('med_bg.jpg') исправлен центр без повторов;
  }
}
Экран @media и (минимальная ширина: 901px) {
  HTML {
    background: url('large_bg.jpg') фиксированный центр без повторов;
  }
}
HTML {
  размер фона: обложка;
  -webkit-background-size: обложка;
  -o-background-size: обложка;
  -moz-background-size: обложка;
}
 

Предотвратить загрузку фона скрытого элемента

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

 
Экран @media и (максимальная ширина: 480 пикселей) {
  HTML {
    фон: нет;
  }
} 

Если вы хотите убедиться, что вы не загружаете скрытые изображения (загруженные через ), ознакомьтесь с этим руководством.

Об авторе

Punit Sethi работал с крупными веб-сайтами электронной коммерции и B2C над улучшением скорости, масштабируемости и архитектуры внешнего интерфейса. Он пишет на эти темы здесь.

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

Как мне изменить размер изображений в заголовке

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

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

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

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

Руководство по подбору размеров фоновых изображений героев

Если ваше изображение будет заголовком/главным фоновым изображением, оно должно быть длинным и не слишком высоким. Я делаю свои изображения заголовка 1600 x 500px.

Правильный размер фоновых изображений на всю страницу

Если вы создаете фоновое изображение на всю страницу, вам нужно, чтобы эти изображения были немного выше. Я делаю эти изображения 1600 x 1000px или иногда 1920 х 1200 пикселей. Обычно я делаю оба размера, а затем сжимаю их. Если большее изображение хорошо сжимается и не слишком большое (все еще меньше 400 КБ), я выбираю изображение размером 1920 x 1200 пикселей.

Не забывайте, как изображение может выглядеть на мобильном телефоне

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

Если все выглядит хорошо, перейдите к следующему разделу.

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

В этом случае я переключаю главное изображение (используя медиа-запрос), чтобы на мобильных устройствах отображалось мобильное изображение, а на больших экранах отображалось обычное основное изображение. Обычно я делаю свои мобильные изображения размером 800 x 1200 пикселей.

Вы можете поменять местами изображения героев и мобильных устройств в CSS следующим образом:

 
 CSS 
 
 1. hero-image { 
 
 2 background: url('my-mobile-hero-image.jpg') без повторов по центру вверху; 
 
 3 background-size: обложка; 
 
 4} 
 
 5@media (минимальная ширина: 768px) { 
 
 6 background: url('my-hero-image.jpg') no-repeat center top; 
 
 7} 
 

Это покажет ваше мобильное изображение на любом экране шириной менее 768 пикселей. Если размер экрана больше 768 пикселей, будет отображаться фоновое изображение.

Используйте мой шаблон эскиза

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

Надеюсь, это сэкономит вам время и энергию, когда в следующий раз вам понадобится создать изображение для своего веб-сайта. 🙂

Оптимизация изображения

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

Иногда jpg меньше, а иногда png меньше. Как правило, для этого типа изображения размер jpg будет меньше. Но если вы не уверены, просто экспортируйте jpg и png и посмотрите, какой из них сжимается до меньшего размера.

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

Как правило, старайтесь уменьшать размер изображения до 400 КБ или меньше.

Средства сжатия изображений

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

Вероятно, самый простой способ сжать ваши изображения — просто перейти к Tiny PNG.

Если вам нужен инструмент, который даст вам больше контроля над сжатием и который вы можете использовать в любом месте и в любое время без необходимости подключения к Интернету, обратите внимание на PNG Compressor (приложение macOS для изображений png) и Compressor (приложение macOS для изображений jpg).