Как сделать чтобы фон подстраивался под размер экрана css
Перейти к содержимому

Как сделать чтобы фон подстраивался под размер экрана css

  • автор:

Как сделать, чтобы высота блока с картинкой сама подстраивалась под экран?

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

.background < background-image: url(http://user2026286.atservers.net/img/background.jpg); background-size: cover; height: 1px; min-height: 250px; >
  • Вопрос задан более трёх лет назад
  • 1685 просмотров

Комментировать
Решения вопроса 1

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer

Все условия задачи невыполнимы. Потому что:
1. экран может иметь любые размеры, в т.ч. любое соотношение сторон.
2. картинка может иметь любые размеры, и что более важно — любое соотношение сторон.

Как сделать чтобы фон подстраивался под размер экрана css

Добро пожаловать в проект «Сайт с нуля» !

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

Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

Всем желаю удачи и смелых воплощений идей на вашем сайте !

2010 — 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla — русские версии.

Автор и администратор данного проекта — SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.

Проект для новичков

Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:

Адаптивный (резиновый) фон для сайта

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

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

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

В примере я использую изображение размером 3600 Х 2400рх. Исходный вес картинки 2,18 МБ (а это очень много!) я оставила без изменений, чтобы вы смогли убедиться, что «тяжелые» изображения медленнее загружаются, особенно на мобильных устройствах. Поэтому специально для мобильных гаджетов мы будем использовать второй вариант изображения — более малого размера и веса, например, 768 Х 505 рх.

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

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

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

Как сделать, чтобы высота блока с картинкой сама подстраивалась под экран?

Есть блок с картинкой с заданной фоновой картинкой и минимальной высотой. Интересует, как с помощью стилей так, чтобы высота картинки подстраивалась под экран при его увеличении ( min-height изменялся), т.е. фактически чтобы картинка с цифрами не скрывалась (350Х150) за блоком, а была всегда логически расположена по центру, была на всю ширину и сохраняла пропорции на любых разрешениях экранов. Фидл

.background < background-image: url(http://placehold.it/350x150); background-size: cover; height: 1px; min-height: 250px; >

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

Адаптивная фоновая картинка под все разрешения экрана. CSS-стили

Адаптивная фоновая картинка под все разрешения экрана. CSS-стили

Информация о материале Родительская категория: Программирование Категория: CSS

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

Подготовка картинки, которая будет использоваться в качестве фона страницы (или блока)

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

  • Экстрамалые девайсы («телефоны», < 576px)
  • Малые девайсы («ландшафтные телефоны», >= 576px)
  • Средние девайсы («таблетки», >= 768px)
  • Большие девайсы (десктопы, >= 992px)
  • Экстрабольшие девайсы (большие десктопы, >= 1200px)

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

Все нарезанные картинки поместим в папку images (чтобы не болтались где попало).

HTML-документ с адаптивной фоновой картинкой под все разрешения экрана

Для примера я использую фон для всей страницы и применять стили фона буду к тегу body . Но это может быть и div (или класс для div ), блок, у которого будет фон в виде адаптивной картинки (размеры картинок тогда нужно выбрать соответствующие). Итак, простейший файл index.html для разметки фона с адаптивно позиционирущейся картинкой:

     Космос: Адаптивный CSS-фон страницы   Тут будет основной контент. 

Как видно из текста, я сразу подключил файл со стилями Bootstrap — это позволит сократить время на подбор шрифтов и изначальных отступов. Ну и подсоединил ещё один файл со стилями css/template.css — как раз в нём и содержится информация о том, какую картинку подгружать пользователю (в зависимости от ширины экрана его устройства) и как её позиционировать.

CSS файл со стилями адаптивной фоновой картинки под все разрешения экрана

И собственно, сами стили для адаптивного размещения и выбора фоновой картинки:

/* Экстрамалые девайсы («телефоны», < 576px) Нет @media, т.к. это по умолчанию в Bootstrap */ body < background-color: #251050; color: #fff; >/* Малые девайсы («ландшафтные телефоны», >= 576px) */ @media (min-width: 576px) < body < background: url(../images/kosmos-sm.jpg); >> /* Средние девайсы («таблетки», >= 768px) */ @media (min-width: 768px) < body < background: url(../images/kosmos-md.jpg); >> /* Большие девайсы (десктопы, >= 992px) */ @media (min-width: 768px) < body < background: url(../images/kosmos-lg.jpg); >> /* Экстрабольшие девайсы (большие десктопы, >= 1200px) */ @media (min-width: 1200px) < body < background: url(../images/kosmos-lx.jpg); >> /* общие стили для всех девайсов */ body

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

background-size: cover; background-position: center center; background-attachment: fixed;

Готовый пример использования CSS-стилей для адаптивной фоновой картинки под все разрешения экрана

По → этой ссылке ← можно скачать архив со всеми файлами, при распаковке которого получим стили, картинки и собственно сам HTML-документ со всеми свойствами, описанными выше.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! 😉

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *