响应CSS背景图像-如何让内容跟随

我有CSS背景图像在标题区。图像响应工作正常，但我不能让它工作，使标题下的内容图像“跟随”图像时，它的大小

问题是，当我给标题图像div指定高度值时，div height是固定的。当我不给出高度时，图像根本不显示

参见工作示例

---

如何修复有什么帮助吗？

我想你要做的是消除“空白”的缺口

请尝试以下代码：

HTML

    <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg" />

    <div class="content-wrap">
        <p>here is content</p>
    </div>

以下是您的解决方案：

问题：-除非已在任何位置层中使用，否则百分比高度值不起作用

解决方案：-而不是高度。使用“padding bottom”或“padding top”值使高度响应。因为百分比值与“填充”配合得很好

计算非常简单，可以获得任何背景图像的相关响应高度值

例如：-如果背景图像尺寸为（1200宽）x（450高）像素。然后图像响应“高度”值将为：“37.5%”

公式：-Y（×）100（÷）X，即（450×100÷1200）=37.5%

解决方案URL:-

代码：-

.custom-header-option {
    padding-bottom:37.5%; /* This will make height responsive */
    background-image: url('http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

---

如果需要更多帮助，欢迎使用：）

尝试在header div中使用标记，而不是css背景图像不清楚当您说header image“follows”时是什么意思当图像调整大小时。这意味着标题图像下的内容应附加在标题图像的底部-在标题图像和内容之间不留空间。是否有任何解决方案可以在没有标签的情况下工作？这可能会有所帮助，

.custom-header-option {
    padding-bottom:37.5%; /* This will make height responsive */
    background-image: url('http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}