Как масштабировать фон в css

Правильное масштабирование фона

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

 background-size: 100% auto; 

но если картинка меньше экрана, то она просто растягивается. а мне этого не нужно. как это можно сделать средствами css?

Отслеживать
задан 9 мар 2014 в 16:16
577 3 3 золотых знака 5 5 серебряных знаков 21 21 бронзовый знак
htmlbook.ru/css/background-size background-size: [ | | auto ] | cover | contain
10 мар 2014 в 1:16
@Yura Ivanov а пример можно?
10 апр 2014 в 16:10
@M11, можно, конечно. по ссылке пройдите, там пример.
10 апр 2014 в 21:44
@Yura Ivanov мне бы именно так background-size: [ <значение>| | auto ] | cover | contain
11 апр 2014 в 9:14
А мне нравится, что растягивается.
4 июн 2017 в 15:42

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Если написать вот так:

.demo

Мы передадим такие пожелания браузеру:

• Вставь на фон блока с классом «demo» картинку с котиком
• Размести ее, по возможности, в центре этого блока
• Не надо использовать свойство «замостить», если фоновая картинка меньше этого блока

Немного уточним пожелания:

.first

• Хочу, чтобы фоновое изображение было 100 на 100 пикселей; масштабировать не надо; пропорции сохранять не надо

.second

• Хочу, чтобы фоновое изображение заняло максимальную область блока, при которой сохранит свои пропорции и будет видно целиком

И последний вариант:

.third

• Хочу, чтобы фоновое изображение закрыло блок целиком, оно не обязательно должно быть видно целиком, главное, чтобы сохранились пропорции

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

Что в итоге получится (первый, второй и третий примеры один под одним):

Масштабирование фона

Есть фоновая картинка с основным контентом справа, по дизайну ее необходимо сдвинуть слева на 200px. Подвинул background-position: 200px 319px; Как сделать, чтобы при уменьшении экрана ее контент скрывался по слева, а правая оставалось основной? (Картинка должна быть прижата к правому краю, но при этом сдвинута от левого на 200px)

Отслеживать

задан 11 июл 2021 в 13:18

52 6 6 бронзовых знаков

минимальный воспроизводимый пример

11 июл 2021 в 14:18

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Запустите пример ниже и разверните на весь экран. Измените размер блока, ухватив его за правый нижний угол:

/* Только для примера */ body < margin: 0; min-height: 100vh; background-color: rgba(255, 255, 255, 1); background-image: url("https://i.stack.imgur.com/m9NKc.png"), radial-gradient(#fff8, #000f); background-position: 0% 0%; background-repeat: no-repeat; background-size: auto; display: flex; justify-content: space-around; align-items: center; >.block < /* Обязательно */ position: relative; background-image: url("https://i.stack.imgur.com/tWGMC.jpg"); background-size: 0 0; overflow: hidden; /* Только для примера */ width: 600px; height: 130px; padding: 1em; resize: both; font: bold 18px/1em sans-serif; text-shadow: 0 0 1px white, 0 0 3px white, 0 0 5px white; box-shadow: 0 0 0 3px #fa0; >.block::before < /* Обязательно */ content: ""; position: absolute; top: 0; bottom: 0; left: 200px; right: 0; z-index: -1; background-image: inherit; background-position: right top; background-repeat: no-repeat; >

Есть фоновая картинка с основным контентом справа, по дизайну ее необходимо сдвинуть слева на 200px. Подвинул background-position: 200px 319px; Как сделать, чтобы при уменьшении экрана ее контент скрывался по слева, а правая оставалось основной? (Картинка должна быть прижата к правому краю, но при этом сдвинута от левого на 200px)

css обрезка картинок

нужно обрезать и вставить обычную, горизонтальную и вертикальную картинки в div так, что бы они полностью заполняли собой div не искажаясь (масштабировать по меньшей стороне, а лишнее обрезать) у меня всё работает, кроме обработки квадратной картинки, она должна показыватья почти вся, а видна только ее половина

.img_wrap < width: 300px; height: 200px; overflow: hidden; /*line-height: 200px;*/ /*text-align: center;*/ border-style: solid; >.img_wrap img

Отслеживать

задан 12 окт 2017 в 11:28

173 1 1 золотой знак 3 3 серебряных знака 11 11 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

.img_wrap < width: 300px; height: 200px; border-style: solid; >.img_wrap img

Отслеживать

ответ дан 12 окт 2017 в 21:20

1,108 1 1 золотой знак 7 7 серебряных знаков 13 13 бронзовых знаков

Css растянуть background – Как сделать адаптивный фон-картинку (проблема с высотой при увеличении размера экрана)?

Здесь как можно подробнее разберем. как можно реализовать фон (background) интернет ресурса, что должен покрывать все рабочее пространство. Основном все делается на CSS3, также можно подключить jQuery и даже PHP, но рассмотрим один вариант, который на чистом CSS. Для начало нужно понять или определить, что должно получится. Это безусловно, полноценная заливка окна фоном или изображением, чтоб не было не каких пробелов.

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

Метод CSS3 background

Это метод самый распространенный, что может растянуть background на чистом CSS, и все благодаря одному свойству, под названием background-size, что только будет присутствовать в CSS3.

Здесь изначально создадим background фиксированным и выставим его по центру, что останется его только растянуть, где подключаем свойства background-size, это все идет под ссылку на фон.

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

body <
background: url(http://zornet.ru/Aben/ABGDA/artunsa.png) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
>

Как можно заметить, что параметр background, где изначально добавляем путь на картину, где происходит установка положение изображение в соответствие окна экрана. Если разбирать, то значение center и top отвечает за центр и прижатие по всем сторонам, чтоб не было пробелов. Чтоб понятно было, то значение fixed — отвечает за функцию фиксаций.

Метод совсем обычный, что применяю постоянно и он меня устраивает на все 100% процентов.

Еще один способ:

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

#zornet_ru <
position:fixed;
top:0;
left:0;
min-width:100%;
min-height:100%;
>

Здесь как можно заметить, что этот код не центрирует background image, что можно быстро все сделать как нужно, а точнее фиксировать изображение с помощью взятия ее в div.

#zornet_ru <
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
>
#zornet_ru img <
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
>

На этом все, здесь представлены не все способы, а те, которые больше пременяют.

Также небольшое видео, где все понятно объясняют по как при помощи CSS растянуть фон на весь экран.

PS — если у вас есть свои наработки, хотя здесь должно все одинаково быть. то плиз в комментариях поделитесь с ними.

Как растянуть фон CSS — HTMLer.ru

Привет. Сегодня рассмотрим, как можно растянуть фон css средствами (без вмешательства других средств, таких как javascript и иже с ними).

Растянуть фон CSS средствами стало возможно с появлением CSS3, конкретно при помощи свойства background-size. Надо сказать, что это свойство работает намного лучше, чем аналогичные решения на Javascript (которые использовались до появления background-size), так как быстрее и адекватнее реагирует на изменение размера браузера, быстрее сглаживает растянутую картинку, и, как любили говорить в начале 2000-х, — «Будет работать даже с отключенным Javascript».

Решение: как растянуть фон CSS средствами

У свойства background-size может быть несколько значений.
1) это может быть одна из дирректив: cover или contain.

background-size: contain; /* Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. */ background-size: cover; /* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. */

2) это могут быть проценты (100% или 94% от ширины контейнера). При этом можно использовать как 1 значение в процентах, так и 2. Если значений будет 2, то масштабироваться будут одновременно и высота и ширина картинки, при этом каждая из величин подгоняется пропорционально процентами указанными в параметрах).

background-size: 100%; /*Равносильное директиве cover*/ background-size: 100% 50%; /*Ширина будет на 100% ширины блока, а вот высота — только на 50%, картинка скорее всего будет деформирована*/

3) прямо численное значение (в пискелях, сантиметрах, em и т.д.). Параметров также может быть 2 (или 1), как и в предыдущем случае.
4) значение auto. Обозначает, что картинка не будет растягиваться, а будет использован исходный размер. При этом, параметров также может быть 2 или 1. То есть можно указать следующее:

background-size: 60% auto; /*ширина картинки будет 60%, а высота пропорциональна размерам исходной картинки*/

Где будет работать решение растянуть фон CSS?

Судя по данным сайта Can I Use, работать будет во всех современных браузерах, включа IE версии не ниже 9. Так, что переживать в принципе повода нет. Смотрите таблицу совместимости:

Также рекомендуем:

Растянуть фон изображение на всю ширину CSS

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

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

Плюс в том, что все можно не сложно осуществить при помощи свойство background-size, которое будет изначально задавать размер фона. Здесь указываем только одно значение, которое идет в соответствие ширине графического файла. А вот высота будет уже автоматически подгоняться. Но это не все, так как можно выставить сразу два значения, что изначально будет определять ширину и высоту. В нашем методе растягиваем фон на всю ширину, и по этому нужно указать свойство ширины 100%.

Приступаем к установке:

body <
background: url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/PX-bVQlPQC2Aj8wJZVXYKg.jpg) no-repeat;
background-size:100%;
>

Как видим, все не так сложно, как изначально казалась, но все же есть некоторые нюансы, которые нужно знать.

Так будет смотреться в браузере:

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

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

Также рекомендую ознакомится с похожей темой, под названием: поставить background на всю ширину, где аналогично все выстраивается через стилистику CSS вашего сайта.

background-size | htmlbook.ru

Краткая информация

Версии CSS

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ | | auto ] | cover | contain

Значения

<значение>Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. Задает размер фоновой картинки в процентах от ширины или высоты элемента. auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки. cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. contain Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

       
.
  

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size.

Opera до версии 10.53 использует нестандартное свойство -o-background-size.

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size.

html — Растянуть и масштабировать фон CSS

Определите «растянуть и масштабировать» …

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

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

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

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

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