Как сделать фоновое изображение 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


3 комментария:

  1. Вика, спасибо, освежило память, верстка очень интересная наука, на html создал не один сайт, кстати сайты на простом html поисковиками воспринимаются значительно лучше и позиционируются выше, проверенное наблюдение

    ОтветитьУдалить
    Ответы
    1. Мне бы ваши знания Александр. Так потихоньку познаёшь эту науку. Спасибо за комментарий. Это Ваш сайт http://biznes-on-line.biz/? Очень интересный дизайн. Но к сожалению не могу открыть сообщения. грузится так долго.

      Удалить
  2. Вика, интересная информация, возьму на заметку.

    ОтветитьУдалить

Пользовательский поиск