4

Tengo un problema con respecto al background de la página web, que estoy terminando:

Me falta solamente sobreponer toda la parte del blog ENCIMA del background de matrix y que todo se vea bien y centrado.

Lamentablemente no he logrado concretarlo, he intentando con FIXED o ABSOLUTE y nada. También intenté con el z-index colocándole números y tampoco me funcionó.

He aquí el código:

var c = document.getElementById("c");
  var ctx = c.getContext("2d");
  c.height = window.innerHeight;
  c.width = window.innerWidth;
  var txts = "{{site.bgtext}}";
  txts = txts.split("");
  var font_size = 12;
  var columns = c.width / font_size;
  var drops = [];
  for (var x = 0; x < columns; x++) drops[x] = 1;
  function draw() {
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.fillStyle = "#490";
    ctx.font = font_size + "px arial";
    for (var i = 0; i < drops.length; i++) {
      var text = txts[Math.floor(Math.random() * txts.length)];
      ctx.fillText(text, i * font_size, drops[i] * font_size);
      if (drops[i] * font_size > c.height || Math.random() > 0.98) drops[i] = 0;
      drops[i]++;
    }
  }
  setInterval(draw, 20);


  
body {
    font-family: monospace;
    width: 900px;
    margin: 0 auto;
    padding: 70px; 
}

#big-div {
    height: 400px;
    color: #34a507;
    overflow: scroll;
}

.matrix-bg {
    margin:0;
    padding:0;
}

a {
    color:red;
}

h2 {
    text-align: center;
    padding: 30px;
}

.container2 {
    margin-top: 50px;
}

footer {
    text-align: center;
    margin-top: 50px;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Styles CSS -->
    <link rel="stylesheet" type="text/css" href="styles.css">

    <title>Hacker blog!</title>
  </head>
  <body>
                <div class="matrix-bg">
                        <canvas id="c" height="700" width="1093"></canvas>
                </div>       

    <div id="big-div" style="background-color: transparent;">
    <div class="container0">
        <nav class="navbar navbar-expand-lg navbar-light">
                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">/Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">/Email </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">/Github </a>
                    </li>

                  </ul>
                  <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                  </form>
                </div>
              </nav>

        <h2>Hacker Personal Blog</h2>
    </div>


    <div class="container1">
        <h3>Working on...</h3>
        <table style="background-color: transparent;" class="table table-sm">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Projects</th>
                    <th scope="col">With</th>
                    <th scope="col">On</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Hacking Facebook</td>
                    <td>Marc Zuckerberg</td>
                    <td>Linux</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Government</td>
                    <td>Donald Trump</td>
                    <td>Windows XP</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td>Your Mom</td>
                    <td>Whatsapp</td>
                    <td>Fridays</td>
                  </tr>
                </tbody>
              </table>

        <h5>Download and Documentation: <a href="#">Here</a> </h5>      
    </div>

    <div class="container2">
        <h3>Post list, dates and stuffs</h3>
        <ul style="background-color: transparent;" class="list-group">
            <li class="list-group-item"><a href="#">amazing-hacking-project</a> Jul 16, 19</li>
            <li class="list-group-item"><a href="#">how_fb_makesyou_stupid</a> May 25, 19</li>
            <li class="list-group-item"><a href="#">the_rise_of_chicken_food</a> Apr 16, 19</li>
            <li class="list-group-item"><a href="#">yourmom-project-github</a> Feb 04, 19</li>
            <li class="list-group-item"><a href="#">your_sister_too-github</a> Jan 01, 19</li>
         </ul>
    </div>

        <footer>contact: [email protected]</footer>
    </div>
    <!-- Optional JavaScript -->
    <script src="main.js"></script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Como pueden observar en la ejecución del código con HTML, CSS, JS y Bootstrap se darán cuenta cuál es el problema.

1 respuesta 1

2

El canvas lo pones fixed ( top, right, bottom, left todos 0 ) y con z-index -1

Como failsafe para navegadores no muy estandar podes ponerle también:

width: 100vw;
height: 100vh;
width: 100%;
height: 100%;

var c = document.getElementById('c');
  var ctx = c.getContext("2d");
  c.height = window.innerHeight;
  c.width = window.innerWidth;
  var txts = "{{site.bgtext}}";
  txts = txts.split("");
  var font_size = 12;
  var columns = c.width / font_size;
  var drops = [];
  for (var x = 0; x < columns; x++) drops[x] = 1;
  function draw() {
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.fillStyle = "#490";
    ctx.font = font_size + "px arial";
    for (var i = 0; i < drops.length; i++) {
      var text = txts[Math.floor(Math.random() * txts.length)];
      ctx.fillText(text, i * font_size, drops[i] * font_size);
      if (drops[i] * font_size > c.height || Math.random() > 0.98) drops[i] = 0;
      drops[i]++;
    }
  }
  setInterval(draw, 20);
body {
    font-family: monospace;
    width: 900px;
    margin: 0 auto;
    padding: 70px; 
}

#big-div {
    height: 400px;
    color: #34a507;
    overflow: scroll;
}

.matrix-bg {
    margin:0;
    padding:0;
}

a {
    color:red;
}

h2 {
    text-align: center;
    padding: 30px;
}

.container2 {
    margin-top: 50px;
}

footer {
    text-align: center;
    margin-top: 50px;
}
#c{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index: -1
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Styles CSS -->
    <link rel="stylesheet" type="text/css" href="styles.css">

    <title>Hacker blog!</title>
  </head>
  <body>
                <div class="matrix-bg">
                        <canvas id="c" height="700" width="1093"></canvas>
                </div>       

    <div id="big-div" style="background-color: transparent;">
    <div class="container0">
        <nav class="navbar navbar-expand-lg navbar-light">
                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">/Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">/Email </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">/Github </a>
                    </li>

                  </ul>
                  <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                  </form>
                </div>
              </nav>

        <h2>Hacker Personal Blog</h2>
    </div>


    <div class="container1">
        <h3>Working on...</h3>
        <table style="background-color: transparent;" class="table table-sm">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Projects</th>
                    <th scope="col">With</th>
                    <th scope="col">On</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Hacking Facebook</td>
                    <td>Marc Zuckerberg</td>
                    <td>Linux</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Government</td>
                    <td>Donald Trump</td>
                    <td>Windows XP</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td>Your Mom</td>
                    <td>Whatsapp</td>
                    <td>Fridays</td>
                  </tr>
                </tbody>
              </table>

        <h5>Download and Documentation: <a href="#">Here</a> </h5>      
    </div>

    <div class="container2">
        <h3>Post list, dates and stuffs</h3>
        <ul style="background-color: transparent;" class="list-group">
            <li class="list-group-item"><a href="#">amazing-hacking-project</a> Jul 16, 19</li>
            <li class="list-group-item"><a href="#">how_fb_makesyou_stupid</a> May 25, 19</li>
            <li class="list-group-item"><a href="#">the_rise_of_chicken_food</a> Apr 16, 19</li>
            <li class="list-group-item"><a href="#">yourmom-project-github</a> Feb 04, 19</li>
            <li class="list-group-item"><a href="#">your_sister_too-github</a> Jan 01, 19</li>
         </ul>
    </div>

        <footer>contact: [email protected]</footer>
    </div>
    <!-- Optional JavaScript -->
    <script src="main.js"></script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

2
  • 2
    FUNCIONO SEÑORES!!! Muchisimas gracias! Commented el 24 oct. 2019 a las 3:21
  • 1
    la cuchara no existe! =P Commented el 24 oct. 2019 a las 3:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.