В заголовок сайта картинка вставляется тремя способами:
- фоном для единого рисунка. Текст будет располагаться поверх фотографии.
- изображением-ссылкой, когда отсутствует текст.
- с помощью :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(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif); } #header-inner h1:after { content: url(http://4.bp.blogspot.com/_ebKrCj8TLPk/TRSLqf1V6II/AAAAAAAABPA/gxtqKRprck4/s1600/demoHeader.jpg); position: absolute; transform: translate(100px, 0px); /* смещение вправо */ }
применим CSS наложение:
#header-inner { position: relative; } #header-inner:after { content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif); position: absolute; top: 20px; /* свои значения */ left: 50px; /* свои значения */ }источник
Комментариев нет:
Отправить комментарий