如何使自定义标题图像响应

Question

我正在网站上工作，主题是响应式主题，但标题背景并未在移动设备和平板电脑上调整大小 下面是该网站的链接 http://unitednews.sr/category/magazine/

每个类别都有一个唯一的标题， 这就是我在css中的类别杂志

.category-3 #header-wrap { background: url( http://unitednews.sr/wp-content/uploads/2014/10/Header_Unitedmagazine.jpg); }

如何让它们响应？

Answer 1

您可以将background-repeat:no-repeat和background-size:cover放入.category-3 #header-wrap {}。

示例：

.category-3 #header-wrap { 
    background: url( http://unitednews.sr/wp-content/uploads/2014/10/Header_Unitedmagazine.jpg); 
    background-repeat:no-repeat;
    background-size:cover;
}

Answer 2

您必须将标题背景图像与标题本身分开才能获得结果。

如果您看到主题的HTML架构，它看起来像这样，它已经响应。

<div id="header-wrap" class="clr"> <!--YOUR HEADER BACKGROUND LINE SPACE -->
            <header id="header" class="site-header clr container" role="banner">YOUR HEADER IMAGE SPACE</header>
</div>

将标题背景放在＃header中的＃header-wrap和header / banner中。 它应该工作。

<强>修饰

你的头文件应该是这样的。

<div id="header-wrap" class="clr">
            <header id="header" class="site-header clr container" role="banner">                
    <img src="http://unitednews.sr/wp-content/uploads/2014/10/YOUR-CROPED-BANNER.jpg"><!--This isyour middle Area/banner of header, as explained above ->       </header><!-- #header -->
        </div>

相应地添加您的css样式，您可能必须删除#header

周围的边距和填充

这将是您在#header中的横幅

这将是你在

重复的标题包装