Делаем картинку фоном сообщения в Blogger(Blogspot)

Пост с фоном картинкой и логотип BloggerИногда при оформлении постов блога, хочется сделать что-нибудь необычное, чего невозможно реализовать используя простые стилевые свойства цвета, тени, градиента или даже все это вместе. В таких случаях всегда приходит на помощь старая, добрая картинка. И вот, продолжая тему изменения шаблона Blogger при помощи CSS, хочу рассказать как сделать в блоге фоном сообщения изображение.
  Конечно же, нет ничего сверхсложного в том, чтобы использовать картинку как фон поста. Но в этой статье, я и хочу уделить внимание некоторым важным моментам, при использовании полноразмерного изображения и реализации такого дизайна именно в Blogger, так как кое-какие трудности в этом есть.
  Вариантов, в данном случаи, не много, а точнее всего два. Но начнем с того, что в стандартном шаблоне уже имеются все необходимые нам селекторы, от нас лишь потребуется добавить к ним новые и/или изменить уже существующие свойства. Все они находятся после строки:
/* Posts
----------------------------------------------- */
  Теперь по вариантам.
Скриншот блога на Blogger с картинкой как фоном поста
Рис 1. Фон поста (без повторения)
1. Самый простой вариант - вместо цвета указать ссылку на картинку, результат показан на рисунке 1.
  Следует обратить внимание что фоновое изображение подложено только под сообщение - без заголовка и "подвала". Также, в данном случаи выбрана картинка с "рваными" краями, которая не предусматривает повторения ни по вертикали, ни по горизонтали, по-этому в CSS для поста, нужно будет указать значения для свойств высоты и ширины соответствующие значениям выбранного изображения и при необходимости добавить полосу вертикальной прокрутки.
  Но можно подобрать или сделать(обрезать) самостоятельно картинку так, чтобы её верхняя часть была, как бы продолжением нижней, и задать для фона вертикальное повторение, тогда для тела сообщения нужно будет задать лишь необходимую ширину, равную ширине картинки.
  Чтобы реализовать данный вариант, для селектора .post-body(он есть в коде шаблона по умолчанию), нужно добавить свойства фона и остальные. Код CSS в этом случаи будет таким:
.post-body {
 font-size: 110%;
 line-height: 1.4;
 position: relative;
 background: url(.../image/post-bacground-600x1000.png) no-repeat; /*фоновое изображение без повторения*/
 height: 1000px; /*высота тела сообщения - соответствует высоте картинки*/
 overflow-y: auto; /*при большом количестве текста автоматически будет добавлена полоса вертикальной прокрутки*/
 width: 600px; /*ширина тела поста - соответствует ширине изображения*/
}
Не забывайте оптимизировать картинки, используя программы для сжатия изображений, перед тем как залить их на хостинг или к себе в блог.
Фоновое изображение сообщений в Blogger
Рис 2. Фон из фрагментов одного изображения
2. Этот вариант немного сложнее, так как придется немного повозится с картинкой и применить свои математические способности, но я считаю его лучше и правильнее. Здесь, в отличии от первого варианта, будет использоваться несколько частей одного изображения.
  В данном случаи, с помощью любого графического редактора, картинка делится на три части: верхнюю - для заголовка, среднюю(центральную) - непосредственно для текста(тела поста) и нижнюю - для "подвала", которые и будут использоваться как фон этих блоков. При этом, нужно учитывать тот момент, что центральная часть выбранного изображения должна быть обрезана таким образом, чтобы при вертикальном повторении, стыки были не заметны. Тут же, в редакторе, корректируется и ширина изображения относительно желаемой ширины поста. Результат показан на рисунке 2.
  CSS код для реализации такого варианта оформления
h3.post-title,
.post,
.post-footer {
 padding: 0;
 margin: 0;
/*
указываем одинаковое значение ширины
для всех необходимых элементов,
равное ширине картинки
*/

 width: 600px;
}
h3.post-title {
 background: url(.../image/post-header-600x138.png) no-repeat;
 height: 138px; /*высота равна высоте отрезка изображения*/
 text-align: center;
}
.post {
 background: url(.../image/post-body-600x517.png) repeat-y; /*для фона поста задаем вертикальное повторение*/
 height: 100%;
}
.post-footer {
 background: url(.../image/post-footer.png)no-repeat;
 height: 116px; /*высота равна высоте отрезка изображения*/
}
/*Стили для внутренних элементов*/
h3.post-title a {
 color: #fff;
}
.post-body {
/*отступы, выравнивают текст поста по центру*/
 margin-left: 120px;
 margin-right: 120px;
 width: auto;
}
.post-footer-line {
 padding: 10px;
 margin: 10px 120px;
}
  Чтобы долго не расписывать что к чему, изобразил схематично:
Схема подготовленного изображения и селекторов
  Вот картинка, которую я использовал в примере, можете поэкспериментировать.
Кирпичи.JPG
Кирпичи.PNG
Приведенные в статье размеры блоков указаны для примера и соответствуют размерам используемого в примерах изображений. Их нужно подбирать самостоятельно и индивидуально.
  Вот пожалуй и все, удачных вам дизайнерских решений.

5 комментариев:

  1. Семенов И.07.04.2013, 16:36

    А у меня не получилось вставить картинку для фона сообщений. Цвет и остальные параметры установились, а картинка ни в какую. Сижу чешу голову.

    ОтветитьУдалить
    Ответы
    1. Надо смотреть код, так не могу сказать где ошибка. В статье стили рабочие и проверенные.

      Удалить
  2. не могу понять как изменить фон поста?

    ОтветитьУдалить
  3. А можно как нибудь сделать так чтоб картинка была сплошным фоном сообщений, а текст был поверх этого?

    ОтветитьУдалить
    Ответы
    1. Если вы будете делать фон (указывать фоном изображение) через CSS, то текст будет в любом случаи сверху. Насчет "сплошным фоном" не совсем понял, смотря какая картинка, в пункте 1 поста, идет речь об цельном изображении (одной картинке), разделение показано как вариант.

      Удалить

Следующее Предыдущее

BestProject