CSS Как заставить контейнер div показывать фоновые изображения слева и справа от div?

Question

Сайт, который я разрабатываю, использует платформу начальной загрузки.Следующая проблема заключается в том, что у меня есть контейнер 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 */ 
}

Answer 2

в этом случае вы должны поместить свой контейнер Fundo в другой контейнер-жидкость, так что:

   <div class="container-fluid back-img">
    <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>
</div>

теперь в css вы добавляете фоновое img в div контейнера-Fluid, которому я дал имя класса back-img, и используете следующий код:

.back-img{
background-img: url("your url");
}

Вы также можете использовать тело вместо этого, но лучше использовать div, если вы не хотите, чтобы фоновое изображение было на всей странице. Я надеюсь, что это поможет вам

обновление: если вы хотите, чтобы фоновое изображение было на каждой стороне отдельно, вы должны изменить свой контейнер на контейнер-жидкость и добавить 3 столбца, например:

<div class="col-sm-2 background-left"> </div>
<div class="col-sm-8 center"> // your mane block should be here(buttons and all your elements </div>
<div class="col-sm-2 background-right"> </div>

и теперь вы добавляете код CSS

.background-left{
background-img: url("your url");
}

.background-right{
background-img: url("your url");
}

Удачи.