css - 如何在标题模块中居中全宽背景图像？

Question

我正在使用带有 purity III 模板的 joomla 3.4.5。

我在“ header ”位置放置了一个页眉模块。

我无法在没有任何填充的情况下使我的背景图片全宽。

在这里你可以看到我有什么: http://prntscr.com/bwfno6

这是您可以看到代码的页面: http://spitzpomeranian.com/fr

这是我的模块的 html 代码:`<

<div class="hearder_mobile" align="center"><br/><br/>
    <h1 style="color:#FFF">Vous recherchez un spitz nain poméranien?</h1>
    <p style="color: #CCC">Nous vendons des chiots poméranian de qualité avec pedigree</p>
        <div class="btn-actions" style="margin-bottom: 20px;">
            <p><a class="btn btn-success btn-lg" href="#diagnostic">Voir chiots disponibles</a></p>
        </div>
</div>

`

这是我的 div 的 CSS:.hearder_mobile{
position:relative；
最小高度:1px；
向右填充:15px；
左填充:15px；
高度:300px；}


当然还有其他的 css 参数，但我不能在这里粘贴所有模板的所有 css 代码。

有没有 super CSS 专家可以帮我解决这个问题。

如您所知，我需要模块周围没有任何白色的全宽背景图像。

感谢您的帮助。

Answer 1

在您的 template.css 文件中，您有一组规则为图像周围的某些元素提供填充。规则集有些复杂，包括针对不同屏幕分辨率的媒体查询，因此您必须使用开发人员工具查看要编辑的行/元素。

例如在行 template.css:2851 你有

@media screen and (min-width: 992px) .page-masthead .row-feature {
 padding: 80px 0;
}

将此行设置为 padding: 0; 将部分解决您的问题。

为您的背景设置 background-size: cover; 也有助于将其扩展到元素的整个宽度和高度。