CSS如何让一个div容器在div之外左右显示背景图片？

Question

我正在开发的网站使用 Bootstrap 框架。接下来的问题是我有一个容器 div，它应该在 div 的左侧和右侧都有一个背景图像，并带有所选的图像背景。以下是我打算的示例。有人可以帮助我吗？谢谢。

HTML/PHP

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<div class="container fundo" id="fadein1">
  <br>
  <br>
  <a href="admin_bairro_adicionar.php" class="btn btn-success">Nova Publicação</a>
  <br>
  <br>
  <p class="titulo_grande">Bairro Mineiro</p>
  <div class="row">
    <?php
            $select_stmt=$db->prepare("SELECT * FROM bairro ORDER BY id DESC;");	//sql select query
            $select_stmt->execute();
            while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
            {
            ?>
      <div class="col-sm-12">
        <a class="linha_paginas"></a>
        <br>
        <br>
        <div id="titulo_titulo">
          <?php echo $row['titulo'];?>
        </div>
        <br>
      </div>
      <div class="col-sm-4">
        <a class="fancybox" href="upload/bairro/<?php echo $row['image']; ?>" data-fancybox-group="media-gallery"><img src="upload/bairro/<?php echo $row['image']; ?>" id="imagem" class="imagem img-fluid"></a>
      </div>
      <div class="col-sm-8">
        <div id="texto_texto">
          <?php echo $row['texto'];?>
        </div>
      </div>
      <div class="col-sm-6" align="right"><a href="admin_bairro_editar.php?update_id=<?php echo $row['id']; ?>" class="btn btn-warning">Editar</a></div>
      <div class="col-sm-6"><a href="?delete_id=<?php echo $row['id']; ?>" class="btn btn-danger">Eliminar</a></div>
      <?php
            }
        ?>
        <br>
        <br>

  </div>
</div>

Answer 1

好吧，您可以通过在容器周围包装另一个 DIV 并将背景应用到该文档来做到这一点。

<div class=“body-bg”>
     <div class=“container”>
            ....
     </div>
</div>

现在，在你的 CSS 中，你这样写:

.body-bg {
     background: url(‘path-to-your-image.jpg’);
     width: 100vw; /* you shouldn’t need this as DIVs usually take width or parent container, anyway */ 
}