skip to Main Content

The website I’m developing uses the bootstrap framework. The problem that follows is that I have a container div that should have a background image outside the div both to the left and to the right with the chosen image background. Below are examples of what I intend. Someone can help me? Thank you.

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>

sketch

2

Answers


  1. in this case you have to put your fundo container inside another container-fluid, so:

       <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>
    

    now on css, you add a background img to the container-fluid div that i gave the class name back-img,and use the following code:

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

    you can also use body instead,but it’s better to use a div if you don’t want the background image on the whole page.
    i hope this will help you

    update: if you want background image in each side alone, you should change your container to container-fluid, and add 3 cols like that:

    <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>
    

    and now you add the css code

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

    Good luck.

    Login or Signup to reply.
  2. Well, you can do this by wrapping another DIV around container and applying background to that doc, instead.

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

    Now, in your CSS, you write this:

    .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 */ 
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search