覆盖整个div与图像

问题描述：

为我的joomla 3.x网站我使用基于EF4框架的模板。我分配宽度“5”来定位top2-1和“7”来定位top2-2。我想为位于top2-1的主页（http://francescaleso.com/it/）创建一个自定义html模块，以显示完全填充它的背景图片。我试图在这个网站做这样的建议：覆盖整个div与图像

.homeimg { 
    overflow: hidden; 
    background-size: cover; 
    background-position: center; 
    background-image: url(/images/headers/home-image.jpg); 
}

和模块只有

<div class="homeimg"></div>

图像的路径是正确的，因为如果我尝试“在新标签中打开”它会正确显示，但它不会显示在我的主页上。

如果我理解正确，你想包括具有'class =“span5”'的div内的完整图像。所以为了达到这个目的，我只是将你的'

'改成了'

'并且工作。我希望这能解决你的问题！下面是它的样子的截图：[Imgur]（http://imgur.com/vQjGA5y） –

如果这样做，我得到这个：http://francescaleso.com/it/ 正如你可以看到它不完全覆盖该区域。如果你看下面的评论的例子，你会看到我想达到什么。另外，我想它是100％的高度（所以如果不滚动，所以垂直填充页面）但不水平 – 94a94

答

在CSS中进行这些修改。

.homeimg { 
    background-size: cover; 
    background-position: center; 
    background-image: url(/images/headers/home-image.jpg); 

    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
}

这样做不会有帮助，因为图像覆盖整个页面覆盖全部其他内容，而我需要它来覆盖它的左上部分。下面是我很**尝试实现的一个例子： http://www.joomla.it/template/8718-ohio-template-only-v1-0.html 我诚实地说，没有线索。 – 94a94

答

----编辑---如果我打了一下绝对和相对位置，我得到这个：的问题是图像不是空间未涡卷的整个高度，也有一个不需要的填充或左边的东西...

覆盖整个div与图像

相关推荐