Как сделать чтобы фон не масштабировался css
Обновлено: 07.07.2024
Свойство background-size задает размер картинки фона. Значением свойства служат любые единицы для размеров, либо ключевые слова auto, cover или contain.
Синтаксис
Ключевые слова
| Значение | Описание |
|---|---|
| auto | Фон будет иметь натуральный размер, такой, как реальный размер картинки фона. Если же auto задано только для одной стороны, то по этой стороне фон будет масштабироваться так, чтобы иметь неискаженные пропорции. |
| cover | Масштабирует картинку так, чтобы она накрыла собой весь блок с сохранением пропорций. Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться. Блок всегда будет покрыт картинкой целиком. |
| contain | Масштабирует картинку так, чтобы она целиком влезла в блок с сохранением пропорций. При этом она может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров элемента). Блок в общем случае будет покрыт картинкой не целиком (зато картинка всегда будет видна вся, хоть и в уменьшенном варианте). |
Значение по умолчанию: auto .
Использование
Единицы для размеров и auto могут быть использованы в различных комбинациях, например, так: auto 20px, или 30% 20px, или auto 30% и так далее. В этом случае первый параметр задает размер фона по ширине, а второй параметр - размер фона по высоте. Если указан один параметр - то он будет задавать размер фона и по ширине, и по высоте одновременно.
У веб-разработчика два врага: дедлайны и изображения. Хватит пытаться втиснуть картинку в макет! Вот 5 методов для полного контроля над графикой.
Если вы встречались с коварными изображениями, которые никак не хотели подстраиваться под макет, эти техники вам точно помогут.
Быстрое решение
Легким движением руки изображение превращается. в элегантный фон!
Все мы хоть раз пользовались этим читерским приемом, правда?
Свойство background отлично работает, но помните, что использовать его следует только для изображений, не относящихся напрямую к контенту, и в некоторых особых случаях.
Решение из будущего
У тега тоже существует одно чудесное свойство – object-fit . Кстати, оно работает и для видео-контейнеров.
Вот и все! object-fit управляет размещением элемента, если ширина и высота отличаются от его настоящего размера. Вместо cover можно использовать значение contain .
В чем подвох?
К сожалению, свойство не работает в IE и старых версиях Safari, но для них есть полифилл.
Решение Netflix
Этот трюк работает везде и требует только обернуть изображение в дополнительный контейнер. Пропорции сохраняются с помощью паддингов, заданных в процентах, а картинка абсолютно позиционируется.
Эта техника может показаться сложной, но она стоит того, чтобы потратить время и разобраться. Ее используют многие сайты, включая Netflix!
Простое решение
Вероятно, вы его уже знаете и не раз использовали:
Если у вас не очень сложная разметка, эту технику можно использовать везде.
Продвинутое решение
К тому же самое производительное, если говорить о времени загрузки. Тяжелое изображение может существенно замедлить вашу веб-страницу, особенно на мобильных гаджетах.
В современных браузерах адрес изображения может изменяться в зависимости от ширины окна. Для этого существует атрибут srcset !
Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость бекграунда как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:
Background-color
Задает цвет фона. Можно применять к отдельным элементам
или ко всему сайту через через тэг :
Background-image
Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:
Обратите внимание как указан путь к изображению — это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать полный путь к изображению. Опция пригодится если вы захотите, например, добавить кликабельный фон на сайте.
Background-size
Определяет размер фонового изображения.
Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.
Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.
Background-repeat
- background-repeat: repeat-x — изображение повторяется только по горизонтали
- background-repeat: repeat-y — изображение повторяется только по вертикали
- background-repeat: repeat — изображение повторяется по горизонтали и вертикали
- background-repeat: no-repeat — изображение не повторяется
background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:
- background-attachment: scroll — прокручивается вместе со страницей
- background-attachment: fixed — при прокрутке фон остается неподвижным
Background-position
Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:
- в фиксированных единицах (пикселы, сантиметры)
- в процентах
- словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).
- background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
- background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
- background-position: right bottom — рисунок располагается снизу справа.
Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Если какое-то свойство пропускается, то его значение установлено по умолчанию.
Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!
Я хочу, чтобы мое фоновое изображение растягивалось и масштабировалось в зависимости от размера окна просмотра браузера.
Я видел некоторые вопросы о переполнении стека, которые выполняют эту работу, например растянуть и масштабировать фон CSS например. Он работает хорошо, но я хочу разместить изображение с помощью background не с img тег.
в этом АН img тег помещается, а затем с помощью CSS мы отдаем должное img тег.
это работает, но этот вопрос немного устарел и утверждает, что в CSS 3 Изменение размера фонового изображения будет работать довольно хорошо. Я пробовал это пример первый, но это не сработало для меня.
есть ли хороший метод, чтобы сделать это с background-image декларации?
CSS3 имеет приятный маленький атрибут background-size:cover .
это масштабирует изображение так, чтобы фоновая область полностью покрывалась фоновым изображением при сохранении соотношения сторон. Вся область будет покрыта, однако часть изображения может быть не видна, если ширина / высота измененного изображения слишком велика
вы можете использовать свойство CSS3, чтобы сделать это довольно красиво. Он изменяет размер до соотношения, поэтому нет искажения изображения (хотя он делает высококлассные небольшие изображения). Просто обратите внимание, что он еще не реализован во всех браузерах.
С помощью код Я уже упоминал.
HTML-код
в CSS
это производит желаемый эффект: прокручивается только содержимое, а не фон.
фоновое изображение изменяет размер окна просмотра браузера для любого размера экрана. Если содержимое не соответствует видовому окну браузера и пользователю необходимо прокрутить страницу, фоновое изображение остается фиксированным в видовом окне, в то время как содержимое свитки.
С CSS 3 кажется, что это было бы намного проще.
растягивает bg, чтобы заполнить весь элемент на обеих осях
следующая часть CSS должна растягивать изображение со всеми браузерами.
Я делаю это динамически для каждой страницы. Поэтому я использую PHP для создания собственного HTML-тега для каждой страницы. Все фотографии находятся в папке "image" и заканчиваются на " Bg.в JPG'.
Если у вас есть только одно фоновое изображение для всех страниц, вы можете удалить $pic переменная, удалите экранирующие обратные косые черты, отрегулируйте пути и поместите этот код в свой CSS файл.
Это было протестировано с помощью Internet Explorer 9, Chrome 21 и Firefox 14.
используйте этот CSS:
вы можете достичь того же эффекта, что и фоновое изображение с тегом img. Вам просто нужно установить его z-индекс ниже, чем все остальное, установить position: absolute и использовать прозрачный фон для каждого окна на переднем плане.
Вы можете добавить этот класс в CSS-файл.
- Safari 3 или более поздней версии
- Chrome что угодно или позже
- Internet Explorer 9 или позднее
- Опера 10 или более поздней версии (Opera 9.5 поддерживается background-size , но не ключевые слова)
- Firefox 3.6 или более поздней версии (Firefox 4 поддерживает версию без префикса поставщика)
для того, чтобы масштабировать изображения в соответствии с размером контейнера следующие:
Я использую это, и это работает со всеми браузерами:
Я согласен с изображением в абсолютном div со 100% шириной и высотой. Убедитесь, что вы установили 100% ширину и высоту для тела в CSS и установили поля и отступы на ноль. Еще одна проблема, с которой вы столкнетесь с этим методом, заключается в том, что при выборе текста область выбора иногда может включать фоновое изображение, что имеет неудачный эффект создания полной страницы с выбранным состоянием. Вы можете обойти это, используя user-select:none правило CSS, например:
кроме того, для SEO Я бы поставил фоновое изображение в нижней части страницы, но если фоновое изображение занимает слишком много времени для загрузки (то есть с белым фоном изначально), вы можете перейти в верхнюю часть страницы.
но тогда это не работало для Google Chrome и сафари - браузеры (растяжка работала, но высота фотографий была всего 2 мм!), пока кто-то не сказал мне, что нет:
попробуйте установить height:auto;min-height:100%;
так что измените это для своего height:100%; линии, дает:
непосредственно перед этим недавно добавленным кодом у меня есть это в моем Друпал тандю темы style.css :
тогда я должен сделать новый блок в Drupal с изображением при добавлении class=stretch :
просто копирование изображения с редактором в этом блоке Drupal не работает; нужно изменить редактор к неформатированному тексту.
Я хотел центрировать и масштабировать фоновое изображение, не растягивая его на всю страницу, и я хотел, чтобы соотношение сторон поддерживалось. Это сработало для меня, благодаря вариациям, предложенным в других ответах:
использовать Бэкстретч плагин. Можно даже сделать несколько слайдов. Он также работает в контейнерах. Таким образом, например, можно было бы только часть фона была покрыта фоновым изображением.
Так как даже я мог заставить его работать, доказывает, что это простой в использовании плагин :).
можно использовать border-image : yourimage свойство для масштабирования изображения до границы, даже если вы даете фоновое изображение, то изображение границы будет нарисовано поверх него.
свойство border-image очень полезно, если ваша таблица стилей реализована где-то, что не поддерживает CSS3 . Если вы используете chrome firefox, то я рекомендую собственность.
вы хотите достичь этого, используя только одно изображение? Потому что вы можете сделать что-то похожее на растягивающийся фон, используя два изображения. PNG картинки, например.
Я сделал это раньше, и это не так сложно. Кроме того, я думаю, что растяжка просто повредит качеству фона. И если вы добавите огромное изображение, это замедлит медленные компьютеры и браузеры.
В моем проекте я установил фоновое изображение со следующими атрибутами:
Но когда на какой-то странице много элементов, это изображение растягивается и расширяется до дна и, следовательно, становится уродливым. Как это сделать без растягивания? Чтобы я мог прокручивать вниз, и это изображение будет постоянным.
Вот пример изображения, растянутого на CodePen. Ниже приведен фрагмент:
Если вы не хотите, чтобы фоновое изображение растягивалось, вам не следует устанавливать background-size: cover элемента. Установка размера фона для покрытия означает, что фоновое изображение будет масштабироваться (растягиваться), чтобы соответствовать размеру элемента контейнера.
Вот что говорит MDN о background-size: cover :
Масштабирует изображение как можно больше и поддерживает соотношение сторон изображения (изображение не сжимается). Изображение "покрывает" всю ширину или высоту контейнера.
Если вы хотите, чтобы фоновое изображение оставалось постоянным даже при прокрутке страницы, вы должны добавить background-attachment: fixed к элементу. Это сохранит изображение на своем месте.
background-position: 50% 50% в приведенном ниже фрагменте - это дополнительная настройка, которая используется только для того, чтобы фоновое изображение было размещено в центре-середине. Этого можно избежать, если такое позиционирование не требуется. По умолчанию изображение будет располагаться в верхнем левом углу.
Обратите внимание, что растяжка происходит с background-size: cover только тогда, когда background-attachment: fixed настройка не применяется (это означает, что изображение не является постоянным и растягивается, чтобы соответствовать полной высоте/ширине контейнера) или когда изображение меньше контейнера, Когда он больше, чем контейнер и background-attachment: fixed применяется background-attachment: fixed настройка, изображение не растягивается.
Еще одна вещь, которую нужно отметить с background-size: cover заключается в том, что когда изображение и контейнер имеют разные размеры, изображение обрезается по бокам. Если его нужно урезать вместо того, чтобы быть обрезанным, то также можно использовать background-size: 100% 100% .
Читайте также: