How TO — Full Page Image
Learn how to create a full page background image with CSS.
Full Page Image
Learn how to create a background image that covers the entire browser window. The following example shows a full-screen (and a half-screen) responsive background image:
How To Create a Full Height Image
Use a container element and add a background image to the container with height: 100% . Tip: Use 50% to create a half page background image. Then use the following background properties to center and scale the image perfectly:
Note: To make sure that the image covers the whole screen, you must also apply height: 100% to both <html> and <body>:
Example
.bg <
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>
How to make full screen background in a web page
How to make an image as background for web page, regardless of the screen size displaying this web page? I want to display it properly. How?
10 Answers 10
its very simple use this css (replace image.jpg with your background image)
um why not just set an image to the bottom layer and forgo all the annoyances
Via jQuery plugins 😉
Use this CSS to make full screen backgound in a web page.
Use the following code in your CSS
Make a div 100% wide and 100% high. Then set a background image.
A quick search for keywords background generator shows this CSS3 produced background pattern that’s dynamically created.
By keeping the image small and repeatable, you won’t have problems with it loading on mobile devices and the small image file-size takes care of memory concerns.
Here’s the markup for the head section:
If your going to use an image of something that should preserve aspect ratio, such as people or objects, then you don’t want 100% for width and height since that will stretch the image out of proportion. Instead check out this quick tutorial that shows different methods for applying background images using CSS.
Как сделать — фоновое изображение на все окно браузера.
Узнайте, как создать полное фоновое изображение страницы с помощью CSS.
Полное изображение страницы
Узнайте, как создать фоновое изображение, охватывающее все окно обозревателя. В следующем примере показан полноэкранный (с половиной экрана) Отзывчивый фоновый рисунок:
Создание изображения с полной высотой
Используйте элемент контейнера и добавить фоновое изображение в контейнер с height: 100% . Совет: Используйте 50% для создания фонового изображения половинной страницы. Затем используйте следующие свойства фона для центрирования и масштабирования изображения отлично:
Примечание: Чтобы убедиться, что изображение охватывает весь экран, необходимо также применить height: 100% к <HTML> и <BODY>:
Пример
.bg <
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>
Адаптивная фоновая картинка под все разрешения экрана. CSS-стили
Информация о материале Родительская категория: Программирование Категория: CSS 
Адаптивная фоновая картинка под все разрешения экрана. CSS-стили
Использование фоновых картинок в качестве элементов дизайна в большинстве случаев — плохая практика, но при хорошем чувстве стиля и правильной разметке страницы, можно получить хороший вариант, на котором приятно смотрится расположенная поверх фона информация. Тем более, что современные браузеры позволяют легко делать полупрозрачные цвета, которые можно подкладывать промежуточным фоном между фоновым изображением и основным контекстом. В этой статье покажу простейший вариант того, как сделать адаптивное фоновое изображение, которое будет автоматически подстраиваться под ширину экрана пользователя и, кроме этого, для разных устройств будет загружаться своя фоновая картинка.
Подготовка картинки, которая будет использоваться в качестве фона страницы (или блока)
Нет нужды грузить большую фоновую картинку на мобильный телефон, а вот для монитора потребуется картинка с хорошим разрешением и большого размера. Для того, чтобы не изобретать велосипед, воспользуемся стандартной сеткой Bootstrap для разных ширин экранов устройств:
- Экстрамалые девайсы («телефоны», < 576px)
- Малые девайсы («ландшафтные телефоны», >= 576px)
- Средние девайсы («таблетки», >= 768px)
- Большие девайсы (десктопы, >= 992px)
- Экстрабольшие девайсы (большие десктопы, >= 1200px)
Исходя из этой сетки ширин устройств, можно нарезать в Photoshop нужного размера картинки, при этом сохранить их в качестве, достаточном для того, чтобы они не «плыли» при просмотре. Надо ещё учесть и то, что это будет фоновая картинка так, что качество их сжатия можно сделать ниже среднего. В итоге получим четыре картинки. (В качестве фона страниц для мобильных устройств предлагаю не экспериментировать и сделать его однородным, задав в виде обычного цвета).
Все нарезанные картинки поместим в папку images (чтобы не болтались где попало).
HTML-документ с адаптивной фоновой картинкой под все разрешения экрана
Для примера я использую фон для всей страницы и применять стили фона буду к тегу body . Но это может быть и div (или класс для div ), блок, у которого будет фон в виде адаптивной картинки (размеры картинок тогда нужно выбрать соответствующие). Итак, простейший файл index.html для разметки фона с адаптивно позиционирущейся картинкой:
Как видно из текста, я сразу подключил файл со стилями Bootstrap — это позволит сократить время на подбор шрифтов и изначальных отступов. Ну и подсоединил ещё один файл со стилями css/template.css — как раз в нём и содержится информация о том, какую картинку подгружать пользователю (в зависимости от ширины экрана его устройства) и как её позиционировать.
CSS файл со стилями адаптивной фоновой картинки под все разрешения экрана
И собственно, сами стили для адаптивного размещения и выбора фоновой картинки:
Для адаптации фоновой картинки служит последний блок, который применяется для любых ширин экранов, так как располагается ниже остальных свойств и перепрописывает их. Вот эти свойства для адаптации по центру и пропорционального растягивания картинки по всей площади экрана:
Готовый пример использования CSS-стилей для адаптивной фоновой картинки под все разрешения экрана
По → этой ссылке ← можно скачать архив со всеми файлами, при распаковке которого получим стили, картинки и собственно сам HTML-документ со всеми свойствами, описанными выше.
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Выберите, то, чем пользуетесь чаще всего: