Добавить картинку в заголовок блога

В заголовок сайта картинка вставляется тремя способами:

1. фоном для единого рисунка. Текст будет располагаться поверх фотографии.
2. изображением-ссылкой, когда отсутствует текст.
3. с помощью :before и :after для резиновых ресурсов.

У шапки блога на Blogger id='header-inner'. Зная это мы можем дополнить стиль CSS, скажем так:

#header-inner h1 {
  overflow: hidden; 
  line-height: 200px; /* текст по центру по вертикали */
  text-align: center; /* текст по центру по горизонтали */
  position: relative;
}
#header-inner h1:before {
  content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkIWsTkG64Wj3Jv-PWf2cxr4gCyhxNpfmecD9hcYBbGSOWBfshoqRVrj_Su4QkXhzgoLBMZ02M-bJvXWusHyhizIqDMd4yg_zbpYXZwHzmtHB11dqAovsBfgUqYzhvp6UlceoUydoIL0Mb/s1600/privet.gif);
}
#header-inner h1:after {
  content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1hV3t_6vnQp1MIeaQzPkcRczcNWz6c1RA4LgRVjKj_1A0TNp7kzGD-SZuNpCFatcAUl3jzBexenDQqOe3ocaw_GhpHEmONoHSfkDY53yQFUtt9tgN28fzvPwn4b4rlqvsFU4hkycUN4OH/s1600/demoHeader.jpg);
  position: absolute;
  transform: translate(100px, 0px); /* смещение вправо */
}

Для варианта, когда присутствует изображение на вкладке "Дизайн" в блоке "заголовок"

применим CSS наложение:

#header-inner {
  position: relative;
}
#header-inner:after {
  content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkIWsTkG64Wj3Jv-PWf2cxr4gCyhxNpfmecD9hcYBbGSOWBfshoqRVrj_Su4QkXhzgoLBMZ02M-bJvXWusHyhizIqDMd4yg_zbpYXZwHzmtHB11dqAovsBfgUqYzhvp6UlceoUydoIL0Mb/s1600/privet.gif);
  position: absolute;
  top: 20px;  /* свои значения */
  left: 50px;  /* свои значения */
}

источник