как создавать различные фоновые изображения (div)

Question

У меня есть новые статьи в моей БД с (название, подзаголовок, дата и изображение), я пытаюсь отобразить как правильную карту здесь Я попробовал это в CSS, какпример, но это будет работать только с одним изображением.Я показываю три из них на одной странице.

Существует также другая проблема, при которой изображения добавляются через ckfinder, который всегда содержит тег P и тег img.

, поэтому я попытался использовать тег img в качестве фона, но изображение отображается справа.

if ($result->num_rows > 0 ) {
   while ($row = $result->fetch_assoc()) {
      if ($row['aafbeelding'] == ''){
         echo "<img src='images/tumbnail.png' class='w3-third'>";
      } else {
         echo $row["aafbeelding"];
      }
   echo "<div class='wrapper'><div class='header'><div class='date'><span class='day'>12</span><span class='month'>Aug</span><span class='year'>2016</span></div></div><div class='data'><div class='menu-content'>";
   echo "<h1 class='title'><a href='#'>".$row["titel"]."</a></h1>";
   echo "<p class='text'>".$row["subtitel"]."</p>";
   echo "<a href='#letstenuujts' class='button'>Laes meer</a>";
   echo "</div></div></div></div>";
}

$row["aafbeelding"], например:

<p><img alt="" src="http://localhost/tuinhagedisse/images/Sponsors/Hermus.png" style="height:213px; width:480px" /></p>

CSS =

.example-2 img {
    position:absolute;
    z-index:0;
}

Как я могу убедиться, что изображение содержит фон, как на примере, но затем динамический?

Кроме того, у меня есть решение в моемвозражаю, но тогда мне нужно, чтобы CKfinder загружал только путь на сервер, поэтому без высоты тега p и img и т. д. это возможно?

Answer 1

Можно делать только с CSS.

if ($result->num_rows > 0 ) {
   while ($row = $result->fetch_assoc()) {
      echo "<div class='example'>";
      if ($row['aafbeelding'] == ''){
         echo "<img src='images/tumbnail.png' class='w3-third'>";
      } else {
         echo $row["aafbeelding"];
      }
      echo "<div class='wrapper'><div class='header'><div class='date'><span class='day'>12</span><span class='month'>Aug</span><span class='year'>2016</span></div></div><div class='data'><div class='menu-content'>";
      echo "<h1 class='title'><a href='#'>".$row["titel"]."</a></h1>";
      echo "<p class='text'>".$row["subtitel"]."</p>";
      echo "<a href='#letstenuujts' class='button'>Laes meer</a>";
      echo "</div></div></div></div>";
   }
}

.example {
  position: relative;
  display: inline-block;
  background-color: #000;
}

.example > p {
  display: inline;
}

.example img {
  display: block;
  opacity: 0.5;
  height: 213px;
  width: 480px;
}

.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
}

JSFiddle для статического примера