Как просто изменить общий фон блога

Привет, друзья. Хочу показать как очень просто изменить общий фон всего блога. Хотя сам фон можно легко настроить в разделе Тема. Там можно подобрать готовые фоны или залить свою картинку и сделать соответствующие настройки. Однако, решила вам предложить более лёгкий вариант, на мой взгляд. Здесь мы сами сможем регулировать размер фоновой картинки. Вернее её ширину. 

Перейдём к делу. Изначально мой тестовый блог выглядел так. Я отметила пространство (или задний фон всего полотна), который задан был в настройках темы.



Сейчас мы его поменяем на такую картинку



Чтобы получилось примерно вот так

картинка вместо фона


Здесь я хочу обратить ваше внимание. Ширина блога в моём случае 1200 px. Размеры  фоновой картинки  1450 на 950 px. Картинка заполнила полностью всё пространство.

Если размеры фоновой картинки будут меньше размера всего полотна блога, то она не закроет всё пространство и будет выглядеть в виде бордюра. Посмотрите разницу

картинка вместо фона


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

Особых навыков не нужно.

1. Подберите нужную картинку и скопируйте её адрес.
2.Копируйте приведённый ниже код и устанавливаете адрес своей картинки

body {
background: url(здесь адрес картинки)
no-repeat top fixed;
}


3. Идём во вкладку Тема - Изменить HTML находим   ]]></b:skin> и устанавливаем над этой строкой готовый код.

Результат будет виден при просмотре темы. Если вы остались им довольны смело нажимайте сохранить и любуйтесь новым шаблоном.

Опять же повторюсь. На тот случай если картинка оказалась меньше размеров ширины блога или вообще спряталась с глаз долой, нужно в коде задать значение ширины. Добавим всего одну строчку и он выглядел так
 
body {
background: url(http://www.clipartbest.com/cliparts/9iz/EnR/9izEnR56T.png)
no-repeat top fixed ;
background-size: 100%;
}

Со значением background-size: 100%; можно поиграться, меняя его на меньшее, пока не добьётесь желаемого.

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


Возможно Вы пропустили

Как сделать фоновое изображение на CSS
Постоянно меняющийся фон страницы
Шаблон блога на всю ширину страницы

Всем добра и до встречи. 

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

  1. Интересно, Виктория! Потом ещё подробно почитаю на компьютере.

    ОтветитьУдалить
  2. Ирина, попробуй конечно. К котикам можно вообще интересные картинки подобрать.

    ОтветитьУдалить
  3. видимо на сторонних шаблонах не хочет работать,у меня он сел на верхушку только,а жаль

    ОтветитьУдалить
  4. Монетка, сторонние шаблоны на то и сторонние. не знамо кем писанные и как. Код только для шаблонов Блоггер.

    ОтветитьУдалить
  5. я столько времени скала как этот фон сменить,так обрадовалась,но не получается.Теперь понятно почему.

    ОтветитьУдалить
  6. Глянул. Действительно, даже для меня, никудышного блогера, не сложно. Подумал. А дай-ка я сделаю фон голубым! Подумал ещё раз, и решил, что кое-кто не так поймет. Конечно, в моём возрасте проблема не то, что бы актуальна, но всё таки... И спасибо за рекомендацию.

    ОтветитьУдалить
  7. Семён, хоть серобуромалиновым. Умный не скажет, дурак не поймёт.

    ОтветитьУдалить
  8. довольно интересно, спасибо

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML