Адаптивный фон c bootstrap

@mexx-nikitin · Регистрация: 28.03.2010

Студворк — интернет-сервис помощи студентам

Пытаюсь сделать адаптивный фон, но почему-то изображение получается обрезанным подскажите почему?

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="main">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="row">
 
        </div>
      </div>
    </div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
    background-image:url('../images/files.png');
    color: #fff; 
    max-width: 100%; 
    height: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-attachment: relative;

@Karssen · 19.11.2015, 22:47

к чему стили то применяете?

@mrBobrillo · 19.11.2015, 22:58

При background-size: cover; изображение будет обрезаться, так как данный атрибут старается соблюдать пропорции изображения по высоте и ширине, а так как изображение растягивается на всю ширину блока или экрана, то соответственно ему не хватает высоты и оно обрезается. Если не замечали, то при сжатии экрана, изображение постепенно уменьшается до своих адекватных размеров + стопается обрезаясь с края ...

@mexx-nikitin · 19.11.2015, 23:14 **[ТС]**

Стили я применял к id="main'.Подскажите, что нужно написать,чтобы заработало?

@mrBobrillo · 19.11.2015, 23:16

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

@Karssen · 19.11.2015, 23:18

Попробуйте contain вместо cover

@mexx-nikitin · 19.11.2015, 23:23 **[ТС]**

Написал с contain, но ничего не изменилось

HTML5
1
2
3
4
5
6
7
8
9
10
11
#main{
    background-image:url('../images/files.png');
   color: #fff; 
    max-width: 100%; 
    height: 100%; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
    background-attachment: relative;
}

@mrBobrillo · 19.11.2015, 23:26

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

@mexx-nikitin · 19.11.2015, 23:38 **[ТС]**

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

HTML5
1
2
3
4
5
6
7
8
9
10
#main{
    background:url('../images/file.png');
    color: #fff; 
    max-width: 100%; 
    height: auto; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size:100%;  
}

но он тоже не катит.Как исправить?А то я чего то не понимаю

@mrBobrillo · 19.11.2015, 23:46

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

@mexx-nikitin · 19.11.2015, 23:54 **[ТС]**

Как тогда для данного случая будет выглядеть код? Если, как баннер реализовать?

@mrBobrillo · 20.11.2015, 00:07

Ваш первоначальный код подходит. Вот то что у вас происходит на самом деле http://jsfiddle.net/b1cg2vnv/52/
Изображение адаптируется к ширине экрана, но по высоте ему не хватает места, из за того, что соблюдаются пропорции ширины и высоты, чтоб не было растянутого изображения. По другому никак ...

Добавлено через 3 минуты
Попробуйте порастягивать блок и посмотрите что получается

@mexx-nikitin · 20.11.2015, 10:15 **[ТС]**

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

@mrBobrillo · 20.11.2015, 10:20

На сколько вы заметили, никаких медиазапросов в css у меня не присутствует, они вам не помогут тоже. Всю работу выполняет background-size: cover; Или вы не прописываете данное свойство и ваше изображение просто центрируете + оно не будет на всю ширину экрана, или остаетесь при cover.
Еще раз повторюсь, делайте широкий баннер, тогда можно будет обойтись без cover

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	19.11.2015, 22:47
	к чему стили то применяете? 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	19.11.2015, 22:58
	При background-size: cover; изображение будет обрезаться, так как данный атрибут старается соблюдать пропорции изображения по высоте и ширине, а так как изображение растягивается на всю ширину блока или экрана, то соответственно ему не хватает высоты и оно обрезается. Если не замечали, то при сжатии экрана, изображение постепенно уменьшается до своих адекватных размеров + стопается обрезаясь с края ... 0

@mexx-nikitin 79 / 79 / 8 Регистрация: 28.03.2010 Сообщений: 306
	19.11.2015, 23:14 [ТС]
	Стили я применял к id="main'.Подскажите, что нужно написать,чтобы заработало? 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	19.11.2015, 23:16
	Смотря что вы хотите видеть, если хотите чтоб изображение было на всю ширину экрана, то или cover или делать баннера как минимум 2000 шириной ... 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	19.11.2015, 23:18
	Попробуйте contain вместо cover 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	19.11.2015, 23:26
	mexx-nikitin я вам еще раз повторяю, если на всю ширину экрана то кроме большого баннера или cover вы не настроите, если желаете видеть не сплюснутое изображение ... 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	19.11.2015, 23:46
	В первую очередь, вы должны понимать симметрию, что когда сжимается экран, то начинает сжиматься и фон по ширине, когда сжимается фон по ширине, то он начинает сжиматься пропорционально по высоте, как я выше повторялся, то или cover или широкий баннер. Возможно я не прав, но по собственному опыту не первый раз сталкивался и ругался с дизайнерами ... 0

@mexx-nikitin 79 / 79 / 8 Регистрация: 28.03.2010 Сообщений: 306
	19.11.2015, 23:54 [ТС]
	Как тогда для данного случая будет выглядеть код? Если, как баннер реализовать? 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	20.11.2015, 00:07
	Сообщение было отмечено mexx-nikitin как решение Решение Ваш первоначальный код подходит. Вот то что у вас происходит на самом деле http://jsfiddle.net/b1cg2vnv/52/ Изображение адаптируется к ширине экрана, но по высоте ему не хватает места, из за того, что соблюдаются пропорции ширины и высоты, чтоб не было растянутого изображения. По другому никак ... Добавлено через 3 минуты Попробуйте порастягивать блок и посмотрите что получается 0

@mexx-nikitin 79 / 79 / 8 Регистрация: 28.03.2010 Сообщений: 306
	20.11.2015, 10:15 [ТС]
	mrBobrillo,т.е нужно писать медиа запрос для каждого размера экрана или есть всё таки способ автоматического вычисления высоты? 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	20.11.2015, 10:20
	На сколько вы заметили, никаких медиазапросов в css у меня не присутствует, они вам не помогут тоже. Всю работу выполняет background-size: cover; Или вы не прописываете данное свойство и ваше изображение просто центрируете + оно не будет на всю ширину экрана, или остаетесь при cover. Еще раз повторюсь, делайте широкий баннер, тогда можно будет обойтись без cover 0

Адаптивный фон c bootstrap

Решение