How to put the bootstrap table on a background image?

Question

How to put the bootstrap table on a background image?

Navigation

#1 by (2 votes)

2

I'm doing a team registration using the bootstrap table, where every logged item is generated a new row with the data, the problem is that the table does not stay on the background image .

Thetabledoesnotappearifthescreenisfull,itonlyappearswhenthescreenisshortened.

HTMLandPHP

<body><divclass="fundo-externo">
        <div id="fundo">
            <img src="../images/ball1.jpg"/> <!-- alt="Uma bola de futebol sobre um gramado" -->
        </div>
    </div>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
    <header class="masthead clearfix navbar navbar-dark bg-dark">
        <div class="logo col-xs-12 col-md-2">
            <img src="../images/drawing2.png" width="35%"/>
        </div>

        <div class="col-xs-12 col-md-8 inner">
            <div class="nav justify-content-center m-auto">
                <h3 class="titulo"> ÁREA DE CADASTRO DE TIMES </h3>
            </div>
        </div>
    </header>

// Área para cadastro
<form action="queryeconfirm.php" method="POST"> <br>
        <div class="container-fluid mt-5" >
            <div class="row mb-5">
                <div class="col-xs-0 col-sm-2 col-md-3"> </div>
                <div class="col-xs-12 col-sm-8 col-md-6 mb-5">
                    <label for="inputEmail" class="sr-only"> Time 1 </label>
                    <div class="input-group">
                        <span class="input-group-addon"> <img src="../images/icon.png" width="12px"/> </span>
                        <input type="text" name="time1" id="email" class="form-control" placeholder="Primeiro time" required="" autofocus>
                    </div> <br> 

                    <label for="inputPassword" class="sr-only"> Time 2 </label>
                    <div class="input-group">
                        <span class="input-group-addon"> <img src="../images/shield.png" width="12px"/> </span>
                        <input type="text" name="time2" id="inputPassword" class="form-control" placeholder="Segundo time" required="">
                    </div> <br> <br>

                    <button class="btn btn-outline-info btn-block" type="submit"> Adicionar times </button>
                </div> <!-- /container -->  
            </div> <!-- /container -->
        </div> <!-- /container -->
        <!-- LINK: http://getbootstrap.com/docs/4.0/components/navs/ (Navs BOOTSTRAP) -->
    </form> 


    // Onde busco os dados no banco
    <?php
        /* Faz a conexao */
        include("../conn/conexao.php");

        $buscar = "SELECT * FROM tb_time";
        $exe = mysqli_query($conexao, $buscar) or die("Ocorreu um erro ao mostrar os dados.");

        // Parte fixa da tabela, o cabeçalho
        echo "
        <div class='container'>
            <div class='table-responsive'>
                <table class='table table-striped table-bordered table-hover'>
                    <thead>
                        <tr>
                            <th> ID </th>
                            <th> Time 1 </th>
                            <th> Time 2 </th>
                            <th> Atualizar </th>
                            <th> Apagar </th>
                        </tr>
                    </thead>";

        // Onde são geradas as partidas que foram cadastradas
        $cont = 0;
        while($linha = mysqli_fetch_array($exe)){
             // Caso o $cont seja par, ele irá receber a cor "white", caso ímpar, ele receberá "d2feff"
             $color = $cont%2 == 0 ? "white" : "d2feff"; 
                echo "  
                    <tbody>
                        <tr>
                            <th>".$linha['id']."</th>
                            <td>".$linha['time1']."</td>
                            <td>".$linha['time2']."</td>
                            <td align='center'> <a href='update.php?id=".$linha['id']."'> <img src='../images/update.png'> </a> </td>
                            <td align='center'> <a href='delete.php?id=".$linha['id']."'> <img src='../images/delete.png'> </a> </td>
                        </tr>
                    </tbody>";
             $cont++;
        }

        // Fechando a tabela
        echo "  
                </table>
            </div>
        </div>
            <div class='container'>
                2017 - Ester A. Patricio
            </div>";
    ?>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="bootstrap-4.0.0-beta/bootstrap-4.0.0-beta/assets/js/ie10-viewport-bug-workaround.js"> </script>
    <!-- http://getbootstrap.com/docs/4.0/layout/grid/  -->
  </body>
</html>

My CSS

img{
    max-width: 100%;
}  


.titulo{
    text-align:center;
    color:white;
    margin-right:25%;
    font-family:monospace;
    font-size:220%;
}

#fundo-externo {
    overflow: hidden; /* para que não tenha rolagem se a imagem de fundo for maior que a tela */
    width: 100%;
    height: 100%;
    position: relative; /* criamos um contexto para posicionamento */
}

#fundo {
    position: fixed; /* posição fixa para que a possível rolagem da tela não revele espaços em branco */
    width: 100%;
    height: 100%;
}

#areaLogin{
    text-align:center;
    color:white;
}

#aqui{
    color:blue-sky;
}

php html css bootstrap

asked by anonymous 29.10.2017 / 02:33

1 answer

Django Admin: Change display format of a date field How do I get the notification to allow Flash Player?

score 2 · Accepted Answer

I'm going to make an example using the bootstrap table you need to fit into your project.

I used a div to the example just to exemplify, it could be the body of the page.

Remember that in bootstrap when you need to subscribe to the native css, you must enter !important at the end of each attribute.

background-color: rgba(230, 230, 125, 0.2) !important;

table {
  min-width: 100% !important;
  position: relative !important;
  background-color: rgba(125, 125, 125, 0.3) !important;
}

table tbody tr:hover{
  background-color: rgba(125, 125, 125, 0.5) !important;
  color: white;
}

#background {
width: 800px;
height: 500px;
padding: 50px;
  background: url('http://placekitten.com/800/500');
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div id="background">
  <table class="table table-condensed table-hover">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Time</th>
        <th>Média</th>
        <th>Gols</th>
        <th>Vitórias</th>
        <th>Mundial</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Vitor</td>
        <td>Botafogo</td>
        <td>12%</td>
        <td>5</td>
        <td>11</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Alex</td>
        <td>Flamengo</td>
        <td>5%</td>
        <td>5</td>
        <td>7</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Theodoro</td>
        <td>Palmeiras</td>
        <td>17%</td>
        <td>14</td>
        <td>21</td>
        <td>!</td>
      </tr>
    </tbody>
  </table>
</div>