Blogger Soho 主题 header 图片未覆盖完整 header 宽度和高度
Blogger Soho theme header image does not cover full header width and height
我正在使用 Blogger Soho 主题,在 header 标题 + 订阅 link 后面放置背景图片时遇到问题。图片(名为 glitter1.jpg)不会覆盖 header 条带的整个宽度和高度;它只环绕 header 标题词。
我搜索了这个论坛,但没有找到以前的解决方案。 Blogger 产品论坛的帖子被忽略。
博客url:https://retireby50sg.blogspot.com
header 图片周围的代码片段:
<div class='blog-name'>
<b:section id='header' name='Header' showaddelement='false'>
<b:widget id='Header1' locked='true' title='Retire by 50 in Singapore (Header)' type='Header' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>http://4.bp.blogspot.com/-S3EDENzAc5M/W081co1cPbI/AAAAAAAABjs/gDO0eWSzxmUM8oaKfcdmKanYu1iAB3pZACK4BGAYYCw/s1600/glitters1.jpg</b:widget-setting>
<b:widget-setting name='displayHeight'>300</b:widget-setting>
<b:widget-setting name='sectionWidth'>705</b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>1140</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<div class='header-widget'>
<b:include cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"}' name='image'/>
<b:include cond='data:imagePlacement not in {"REPLACE", "BEFORE_DESCRIPTION"}' name='title'/>
你能帮忙吗?非常感谢!
看起来您的背景图片应该在带有 class centered-top-container
的项目上。尝试将此添加到您的 CSS:
.centered-top-container {
background: url("http://4.bp.blogspot.com/-S3EDENzAc5M/W081co1cPbI/AAAAAAAABjs/gDO0eWSzxmUM8oaKfcdmKanYu1iAB3pZACK4BGAYYCw/s1600/glitters1.jpg") center cover;
}
.centered-top-container {
background-image: url(\/\/4.bp.blogspot.com\/-S3EDENzAc5M\/W081co1cPbI\/AAAAAAAABjs\/gDO0eWSzxmUM8oaKfcdmKanYu1iAB3pZACK4BGAYYCw\/w1600\/glitters1.jpg);
}
我正在使用 Blogger Soho 主题,在 header 标题 + 订阅 link 后面放置背景图片时遇到问题。图片(名为 glitter1.jpg)不会覆盖 header 条带的整个宽度和高度;它只环绕 header 标题词。
我搜索了这个论坛,但没有找到以前的解决方案。 Blogger 产品论坛的帖子被忽略。
博客url:https://retireby50sg.blogspot.com
header 图片周围的代码片段:
<div class='blog-name'>
<b:section id='header' name='Header' showaddelement='false'>
<b:widget id='Header1' locked='true' title='Retire by 50 in Singapore (Header)' type='Header' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>http://4.bp.blogspot.com/-S3EDENzAc5M/W081co1cPbI/AAAAAAAABjs/gDO0eWSzxmUM8oaKfcdmKanYu1iAB3pZACK4BGAYYCw/s1600/glitters1.jpg</b:widget-setting>
<b:widget-setting name='displayHeight'>300</b:widget-setting>
<b:widget-setting name='sectionWidth'>705</b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>1140</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<div class='header-widget'>
<b:include cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"}' name='image'/>
<b:include cond='data:imagePlacement not in {"REPLACE", "BEFORE_DESCRIPTION"}' name='title'/>
你能帮忙吗?非常感谢!
看起来您的背景图片应该在带有 class centered-top-container
的项目上。尝试将此添加到您的 CSS:
.centered-top-container {
background: url("http://4.bp.blogspot.com/-S3EDENzAc5M/W081co1cPbI/AAAAAAAABjs/gDO0eWSzxmUM8oaKfcdmKanYu1iAB3pZACK4BGAYYCw/s1600/glitters1.jpg") center cover;
}
.centered-top-container {
background-image: url(\/\/4.bp.blogspot.com\/-S3EDENzAc5M\/W081co1cPbI\/AAAAAAAABjs\/gDO0eWSzxmUM8oaKfcdmKanYu1iAB3pZACK4BGAYYCw\/w1600\/glitters1.jpg);
}