Как сделать фон на весь экран css

Обновлено: 04.07.2024

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

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

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

…то высота фоновой картинки будет вычисляться автоматически.

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

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

Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:

Учтите, что изображение может исказиться, если вы не попадете в его пропорции:

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto :

Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

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

Я видел некоторые вопросы о переполнении стека, которые выполняют эту работу, например растянуть и масштабировать фон 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 картинки, например.

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

Для того чтобы растянуть фон можно воспользоваться масштабированием. Чтобы отмасштабировать фон существует CSS свойство background-size . Оно принимает значение 100%, в результате чего, фоновая картинка любого элемента (body, div и др.) будет растянута в соответствии с размерами элемента.

Данное свойство поддерживается большинством современных браузеров. Internet Explorer как всегда отличился и поддерживает свойство background-size только в версии 9+.

Background-size: масштабирование фонового рисунка

Значения background-size

Ключевые слова

auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

Числовые значения

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:

Учтите, что изображение может исказиться, если вы не попадете в его пропорции:

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto :

Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Поддержка браузерами

Работа с картинками (изображениями) в CSS

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

Фоновая картинка.

background | background-image

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

Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.
Например, если HTML-файл и фоновый рисунок с именем bg.jpg хранятся в одной папке, то достаточно задать url(bg.jpg), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.jpg).

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

Повтор фоновой картинки.

background-repeat

Бывают моменты, когда нам необходимо управлять повторами фонового изображения. Например, нам выгодно, чтобы повтор фонового изображения был только по горизонтали или только по вертикали, а бывает момент, что повтор фонового изображения нам вообще не нужен. Итак, как нам выкрутиться в этой ситуации? Воспользуйтесь стилевым свойством background-repeat.

background-repeat: repeat-y | repeat-x | no-repeat;

repeat-y — повтор фонового изображения по оси — у (вертикаль);
repeat-x — повтор фонового изображения по оси — х ( горизонталь);
no-repeat; — запретить повтор фонового изображения (изображение будет как оно есть);

Если не задать стилевое свойство background-repeat, тогда фоновое изображение веб-страницы будет залито полностью фоновой картинкой.

Как добавить две фоновые картинки на веб-страницу.

background

Бываю такие моменты, когда нам необходимо создать два фона для сайта. Например, один фон повторяется по вертикали или по горизонтали, а второй фон выводится без повторения.
Добавим две фоновые картинки старым добрым способом. По крайне мере я знаю точно, все браузеры отображают этот метод.
Зададим фоновое изображение к элементам — HTML и BODY.

Картинка по центру.

Существуют несколько методов установить картинку по центру.

Как в css изменить размер картинки.

background-size

Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.
В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

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

Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

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

а можно вот так:

Обтекание (выравнивание) картинки текстом.

float

Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки , вот только в CSS по какой стороне будет выравнивание элементов определяет float.

float: left | right | none ;

left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

right — выровнять картинку по правому краю, текст обтекает по левой стороне.

none — выравнивание и обтекание не задается (значение по умолчанию).

Здесь я указал отступы текста от картинки

Тень картинки.

box-shadow

Небольшая тень под картинкой придает также странице эффект трехмерности, объёма и глубины. Для добавления тени используется свойство box-shadow.

1. — inset — тень внутри элемента, без inset тень будет наружу;
2. — сдвиг тени по горизонтали (6px — вправо, -6px — влево);
3. — сдвиг по вертикали (6px — вниз, -6px — вверх);
4. — размытие тени (0 — четкая тень);
5. — растяжение тени (3px — растяжение, -3px — сжатие);
6. — цвет тени

box-shadow: 0 0 5px; — тень вокруг элемента

box-shadow: inset 0 0 5px; — тень внутри

Прозрачность картинки.

Начну сразу с примера.

Обратите внимание в коде на opacity:0.4 . Поиграйтесь со значением этого свойства и вы увидите на сколько увеличивается или уменьшается прозрачность картинки.

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

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

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

Если оно работает не так, как нужно для вас, вы можете попробовать другие значения: background-size: contain; , background-size: 100%; , background-size: 100vw 100vh; и т. д.

Читайте также: