Как сделать фоновое изображение CSS

Всем привет. Совершенно простой код CSS для создания фонового изображения страницы в виде картинки или фото. Некоторые варианты такого эффекта были в этой шпаргалке. Сегодня с помощью позиционирования элемента и значений position:relative; и position:absolute; а также замены привычных параметров высоты и ширины в px на проценты, создадим любой фоновой рисунок.

Смотрим здесь.

В моём случае размеры фоновой картинки были 650 × 618 px. Сейчас делаем небольшой расчёт по такой схеме. У вас, соответственно будет свой размер изображения.
650:618X100%=105,180%

Копируем вот этот код.

<style>.container { background:transparent url('адрес картинки ') no-repeat 50% 0; background-size:100% auto; height:0; padding-bottom:105.180%; box-sizing:content-box; position:relative; } .container-content { position:absolute; top:0; right:0; bottom:0; left:0; overflow:auto; } </style>

<div class="container"> <div class="container-content">здесь ваш текст </div> </div>

 Я не стала подробно описывать весь код. Предложу, кому интересно вот этот учебник.

Итак, в строке background:transparent url('адрес картинки ') no-repeat 50% 0; указываете путь к фоновой картинке ( её URL). Цифры красного цвета в коде это те проценты, которые высчитали по вышеприведённой схеме.
В контейнер, где написано ваш текст, пишите и вставляйте всё что хотите.

Для тех у кого блоги на Блогспот и ещё не знает как всё это применить у себя. 

В редакторе сообщений переходим из режима создать в режим HTML и устанавливаем этот код. Где написано (ваш текст) пропишите хотя бы одно слово. Возвращаемся в режим создать. Картинку вы сразу не увидите. Продолжайте писать пост, как обычно. Можно вставлять изображения, ссылки. Настраивать соответственно цвет и размер текста. Фон появится только после публикации поста.

Вот и всё. Достаточно просто и красиво. Благодарю вас за внимание. Всем хороших выходных и удачи, конечно же. Спасибо за внимание.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email