sastgroup.com - Tutorials guide scripts web tool

La funzione che creeremo oggi crea un piccolo canvas (6x1) e lo applica come sfondo all'elemento body (con jQuery, in questo caso).
Probabilmente non è veloce come quando si utilizza un'immagine reale, ma è una richiesta HTTP in meno.

 
function generaBgGessato() {
    if (!!!document.createElement('canvas').getContext)
        return;
    var canvas = document.createElement("canvas");
    canvas.width = 6;
    canvas.height = 1;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = 'black';
    ctx.fillRect(0,0,2,1);
    ctx.fillStyle = 'rgba(30,30,30,1)';
    ctx.fillRect(2,0,4,1);
    $('body').css({'background-image': "url("+canvas.toDataURL("image/png")+")"});
}
 

Qui invece trovate un'alternativa CSS utilizzando i gradienti:

 
body {
  background: -webkit-gradient(linear, left top, right top,
    from(black),
    color-stop(66.66666%, black),
    color-stop(66.66666%, rgb(30,30,30)),
    to(rgb(30,30,30))
  );
 
  /* New webkit gradient syntax supported in webkit nightlies */
  background: -webkit-linear-gradient(left,
    black,
    black 66.66666%,
    rgb(30,30,30) 66.66666%,
    rgb(30,30,30)
  );
  -webkit-background-size: 6px;
  background: -moz-repeating-linear-gradient(left
    black,
    black 4px,
    rgb(30,30,30) 4px,
    rgb(30,30,30)
  );
}