Фоновое изображение с помощью HTML

Как растянуть картинку на весь экран css?

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

img  width: 100%; height: 100%; > 

Этот код устанавливает ширину и высоту картинки равными 100%, что означает, что она будет занимать всю доступную ширину и высоту родительского элемента.

Обратите внимание, что этот код работает только если родительский элемент имеет определенную ширину и высоту. Если это не так, то вы можете использовать следующий код:

html, body  width: 100%; height: 100%; margin: 0; padding: 0; > img  width: 100%; height: 100%; > 

Этот код устанавливает ширину и высоту html и body равными 100%, а также убирает верхний и левый отступы (margin), чтобы картинка занимала все доступное пространство.

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

html, body  width: 100%; height: 100%; margin: 0; padding: 0; > img  width: 100%; height: auto; object-fit: cover; > 

Этот код устанавливает атрибут object-fit равным cover , что означает, что картинка будет обрезана, чтобы полностью заполнить доступное пространство, но при этом оставаться пропорциональной.

Нужно понимать, что этот код работает только в современных браузерах, поддерживающих атрибут object-fit . Если вы хотите, чтобы ваш код работал во всех браузерах, вы можете использовать JavaScript для реализации такого поведения.

Источник

Как сделать фон сайта картинкой HTML

В прошлой статье мы говорили о том, как изменить цвет фона на сайте с помощью атрибутов тега body и CSS-стилей: Фон в HTML. В текущей статье речь пойдет об использовании изображений в качестве фона на сайте, о том как растянуть фон на всю ширину страницы и зафиксировать его.

Картинка в качестве фона страницы — HTML

Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body:

    
Здесь фоновое изображение устанавливается с помощью атрибута background тега body.
  

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

Примечание: Фоновое изображение и цвет фона рекомендуется задавать не с помощью HTML, а с помощью CSS. В таком случае код будет валидным и более правильным.

Картинка в качестве фона страницы — CSS

В CSS фоновый цвет и фоновое изображение можно задать одним свойством background:

     
Здесь фоновый рисунок устанавливается с помощью свойства background CSS (фон картинка CSS).
  

Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо «сшиваться» по краям.

Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;

В конструкторе сайтов «Нубекс» для любого сайта можно использовать большое изображение в качестве фона и закрепить его.

Смотрите также:

Источник

CSS Background Image Size Tutorial – How to Code a Full Page Background Image

This tutorial will show you a simple way to code a full page background image using CSS. And you’ll also learn how to make that image responsive to your users’ screen size.

Making a background image fully stretch out to cover the entire browser viewport is a common task in web design. Fortunately, this task can be taken care of with a few lines of CSS.

Cover Viewport with Image

First, we will want to make sure our page actually covers the entire viewport:

Inside html , we will use the background-image property to set the image:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Magic of ‘Background-Size’ Property

The magic happens with the background-size property:

cover tells the browser to make sure the image always covers the entire container, in this case html . The browser will cover the container even if it has to stretch the image or cut a little bit off the edges.

Because the browser may stretch the image, you should use a background image that has high enough resolution. Otherwise the image may appear pixelated.

If you care about having all of the image appear in the background, then you will want to make sure the image is relatively close in aspect ratio compared to the screen size.

How to Fine Tune an Image Position and Avoid Tiling

The browser can also choose to display your background image as tiles depending on its size. To prevent this from happening, use no-repeat :

background-repeat: no-repeat;

To keep things pretty, we will keep our image always centered:

background-position: center center;

This will center the image both horizontally and vertically at all times.

We have now produced a fully responsive image that will always cover the entire background:

How to Fix an Image in Place When Scrolling

Now, just in case you want to add text on top of the background image and that text overflows the current viewport, you may wish to make sure your image stay in the background when the user scrolls down to see the rest of the text:

background-attachment: fixed;

You can include all of the background properties described above using short notation:

background: url(image.jpg) center center cover no-repeat fixed;

Optional: How to Add a Media Query for Mobile

To add some icing on the cake, you may wish to add a media query for smaller screens:

@media only screen and (max-width: 767px) < html < background-image: url(smaller-image.jpg); >> 

You can use Photoshop or some other image editing software to downsize your original image to improve page load speed on mobile internet connections.

So now that you know the magic of creating a responsive, full page image background, it is time to go create some beautiful websites!

Want to See More Web Development Tips and Knowledge?

Источник

Как сделать background-image на весь экран, при условии того, что будет видна вся картинка?

Пробовал разные свойства, но выходит так, что background-image все равно не растягивается должным образом. Нужно, чтобы задний фон покрывал всю страницу сайта, при этом картинка отображалась на 100%, background-image: cover не помогло

background: url(image/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

Этот код не мой и старый я иногда юзаю этот метод ну зачем бездумно копировать-то?
посмотрели бы актуальную поддержку браузерами caniuse.com/#search=background-size
Как видим префиксы уже пару лет неактуальны.

Вы скажите точнее, как нужно. У меня 3 варианта:

1. background-size: contain
Картинка показывается целиком, не искажаясь.
Пример

2. background-size: cover
Картинка заполняет все пространство, не искажаясь, но часть обрезается.
Пример

3. background-size: 100% 100%
Картинка заполняет все пространство, но искажается.
Пример

Источник

Фон, который всегда растягивается на всю страницу

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

Подобный урок уже приводился на сайте RUSELLER.COM. Но с того момента прошло время и наступила пора обновить и расширить список используемых методов.

• Заполнять изображением всю страницу без пробелов.
• Масштабировать изображение, если нужно.
• Сохранять пропорции изображения.
• Изображение центрируется на странице.
• Изображение не создает никаких полос прокрутки.
• Кросс-браузерное решение по возможности.
• Не использовать никаких сторонних технологий, например, Flash.

Удивительный, простой и прогрессивный метод CSS3

Задача легко решается с помощью CSS3 благодаря ставшему доступным свойству background-size . Мы используем элемент html (лучше, чем body , так как он всегда имеет, по крайней мере, высоту окна браузера). Устанавливаем фиксированные и центрированный фон для него, а затем настраиваем размер с помощью присваивания свойству background-size ключевого слова cover.

• Safari 3+
• Chrome
• IE 9+
• Opera 10+ (Opera 9.5 поддерживает свойство background-size, но без ключевых слов)
• Firefox 3.6+

Техника с использованием только CSS. Часть #1.

Используем строчный элемент , размеры которого можно менять в любом браузере. Устанавливаем свойство min-height , чтобы заполнить окно браузера вертикально, а свойству width присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство min-width равным ширине изображения, чтобы никогда оно не уменьшалось.

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

img.bg < /* Устанавливаем правила для заполнения фоном */ min-height: 100%; min-width: 1024px; /* Устанавливаем коэффициент пропорциональности */ width: 100%; height: auto; /* Устанавливаем позиционирование */ position: fixed; top: 0; left: 0; >@media screen and (max-width: 1024px) < /* Определяется свое для каждого конкретного изображения */ img.bg < left: 50%; margin-left: -512px; /* 50% */ >>

• Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.
• IE 6: Не работает — но можно использовать какой-нибудь из трюков для позиционирования.
• IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.
• IE 9: Работает.

Техника с использованием только CSS. Часть #2.

Другой способ решить задачу — поместить строчный элемент на странице, зафиксировать его положение в левом верхнем углу и установить значение 100% для его свойств min-width и min-height , сохраняя коэффициент пропорциональности.

Однако так изображение не центрируется. Поэтому обернем изображение в элемент . Данный будет иметь ширину в два раза больше окна браузера. Изображение, помещенное в него, будет сохранять пропорции и полностью покрывать окно браузера, размещаясь точно в центре.

• Safari / Chrome / Firefox (не тестировалось на всех версиях, но в последних работает прекрасно).
• IE 8+.
• Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения).

Используем jQuery

Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%.

$(function() < var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() < if ( (theWindow.width() / theWindow.height()) < aspectRatio ) < $bg .removeClass() .addClass('bgheight'); >else < $bg .removeClass() .addClass('bgwidth'); >> theWindow.resize(function() < resizeBg(); >).trigger("resize"); >);

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/perfect-full-page-background-image/
Перевел: Сергей Фастунов
Урок создан: 14 Декабря 2010
Просмотров: 135994
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Реализация забавных подсказок

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

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник