Question

所以我正在尝试使用img标签在html / css中创建一个背景img但是我的img标签不允许事物重叠它，当我尝试使用div类元素时它不会延伸到边缘页面甚至宽度为100％。这是我的CSS和HTML。

 .backgroundImage {
background: url(/images/mainBackground.jpeg) top no-repeat;
width: 100%;
height: auto;
position: relative;
z-index: 0;
margin: 0 auto;
} 

.img{
z-index:0;
}

.img-responsive{
 height:auto; 
 width:100%
}

这是我尝试过的两种方式：

<img src="../images/mainBackground.jpeg" class="shadow-offset   img-responsive"/> 

<div class="backgroundImage">

div除了我的页脚之外的一切结束

我有容器，但这些容器都不在任何容器内，因为它们在我使用容器之前从页面顶部开始。

Answer 1

将所有html包装在<html>标记中，然后使用以下css：

html {
   background-image: url("image/url.png");
}

Answer 2

我将假设您要做的就是为您的div添加背景图片 - 您的解释有点不清楚。以下是您所需要的：

// html
<div class="backgroundImage">...</div>

// css
.backgroundImage {
  background-image: url('/images/mainBackground.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}

默认情况下显示

div元素：block，这意味着它应该是100％宽度。除非您的标记中有某些内容未显示给我们，否则无需添加width: 100%。此外，div还将根据其内容自动更改高度。在这种情况下，使用background-size:cover将允许背景图片调整大小并填充div而不管大小。

除非......你在div里面漂浮着东西。然后你需要一个明确的，像这样：

// html
<div class="backgroundImage clear">...</div>

// css
.clear::after {
   content: '';
   display: table;
   clear: both;
}

img标签不允许重叠

2 个答案: