html - 使用 background-image 使图像从 div 中出来

Question

我需要一些帮助，我需要对这张图片进行编码:

这是我目前所拥有的:

我试过添加 margin-top、padding-top，尝试了所有相对位置和绝对位置的组合，我只需要一些关于如何做的想法。

这是我的代码的结构:

<div class="background-oficina">
  <div class="container">
    <div class="col-xs-12 text-center">
      <img class="logo" src="logo.png" alt="Oficina de Redação">
    </div>
  </div>
</div>

这是我正在使用的两个类的 css:

.background-oficina {
  background: #fff url("bg-texture.png");
}

.logo {
  padding-top: 50px;
  margin: 0 auto;
}

Answer 1

您可以使用一个额外的绝对定位元素，您可以为其分配重复的背景图案，并使用 z-index: -1 将其放在原始元素后面:

html, body {
margin: 0;
}
.background-oficina {
  position: relative;
  border: 1px solid #333;
  border-bottom: none;
}

.bg-container {
  position: absolute;
  z-index: -1;
  left: 0;
  top;
  width: 100%;
  height: 120px;  /* or whatever height is desired */
  background: url("http://placehold.it/20x15/cff");
}

.text-center {
  text-align: center;
}

.logo {
  padding-top: 50px;
  margin: 0 auto;
}

<div class="background-oficina">
  <div class="bg-container"></div>
  <div class="container">
    <div class="col-xs-12 text-center">
      <img class="logo" src="http://placehold.it/200x150/fb7" alt="Oficina de Redação">
    </div>
  </div>
</div>