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

【问题标题】：How to make custom header image responsive如何使自定义标题图像响应
【发布时间】：2014-12-26 20:00:28
【问题描述】：

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

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

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

如何让他们响应？

【问题讨论】：

标签： css wordpress header

【解决方案1】：

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

如果您看到主题的 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-wrap 中，将标题/横幅放在#header 中。它应该工作。

修改

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

<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 中的横幅

这将是您重复的标题包装

【讨论】：

我应该把代码放在哪里？ functions.php 还是 header.php ？
你也许可以不使用任何功能，只使用样式和 HTML 来做到这一点。你已经有两个容器 Parent (header-wrap) 和 child(header)。您需要做的就是裁剪当前的标题图像并将其分成两部分。将横幅部分（中间）与背景线分开。并使用 css 将背景分配给父级并在子（标题）容器中添加图像。您可能需要阅读一些关于如何创建子主题的信息codex.wordpress.org/Child_Themes
我已经创建了一个子主题，并且主题中只有一个 css 文件。我的子主题文件夹中也应该有一个 header.php ？
好的，我刚刚复制了 header.php 并将其放在子主题文件夹中，所以现在我有一个 .css 文件和一个 header.php 文件。在 header.php 文件中有一行写着<div id="header-wrap" class="clr"> <header id="header" class="site-header clr container" role="banner">
如果我这样做，标题图像会显示在整个网站上，但我只希望标题图像显示在某个类别中。

【解决方案2】：

您可以将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;
}

【讨论】：

background-size:cover 似乎不起作用