Question

我使用joomla 3.4.5和纯度III模板。

我将标题模块放在＆＃34;标头＆＃34;位置。

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

在这里你可以看到我拥有的东西： http://prntscr.com/bwfno6

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

这是我模块的html代码： `＆LT;

<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; min-height: 1px; padding-right: 15px; padding-left: 15px; height: 300px;}

肯定有其他css参数，但我不能粘贴所有tempalte的所有css代码。

是否有任何超级CSS专家可以帮助我解决这个问题。

如你所知，我需要全宽背景图像而没有任何白色包围模块。

感谢您的帮助。

Answer 1

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

例如，在line template.css：2851，你有

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

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

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

Answer 2

顶部填充来自班级row-feature，因此请将其删除或提供padding-top: 0。对于右边的空格，要消除它，你应该给出背景图像background-size: cover

Answer 3

只需在你的css

中添加两行

.row-feature {
   padding-top: 0 !Important;
}
.custom div {
   background-size: cover;
}

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

3 个答案:

只需在你的css