Display background grid by using image with CSS

Question

The UPDATED DEMO works quite well except for the fact that the background image is getting resized when I change:

background-size: 20px 20px;

Is it possible to keep the original image size and make background images overlap (hide the part of image that exceeds the top-left box (20px 20px) )?

The B plan would be to to crop the image with JS in set base64 image content...

Answer 1

Using an svg image with only a left and top border may be what you are looking for? Check the snippet, or this jsfiddle (the fiddle contains button to scale up/down the grid):

body{
  background: url('http://testbed.nicon.nl/img/_FBs3b.svg') repeat;
  background-size: 20px 20px;
}

Answer 2

I would strongly recommend not using scaled image if you are aiming to get sharp and solid results with a background that is repeated houndreds of time. Here's a nice, 100% programative way to do this using JS and Canvas. Entire JS block as described here takes about half milisecond to execute.

Here's the jsFiddle

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var w = c.getAttribute('width');
var h = c.getAttribute('height');
var color = c.getAttribute('data-color');
ctx.rect(-1, -1, ++w, ++h);
ctx.lineWidth = 1;
ctx.strokeStyle = color;
ctx.stroke();

var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(' + c.toDataURL("image/png") + ')';

And HTML is simply this:

<canvas id="myCanvas" width="20" height="20" data-color="#666666" style="display:none">Your browser does not support the HTML5 canvas tag.</canvas>

All you need to do is echo the width and height that you wan't into this canvas tag (best using server side technology you are usig) and everything will be done automatically.

Let me explain this: ctx.rect(-1, -1, ++w, ++h); We are taking the desired width and height and putting it into variables, then, when painting our rectangle we want it's width to start at [-1, -1] coords, so that we don't have left and top border painted (we don't need it if we want our pattern to tile niecely), and ++w and ++h is just incrementing the painted rectangle width and height by one pixel to go beyond the boundry of canvas and thus strip those two unnecesarry borders.

Try changing width and height in the `canvas`` tag in the fiddle I've made and see if you like the output.

Going this way you can also have control over the width of the line as well as it's color.

Answer 3

One option would be to use a CSS gradient.
The below demonstrates this for a line pattern, but you can easily extend this to have a second background in the other direction.
You'll also need to add any browser-specific prefixes if your project requires backwards compatibility. If you need to support older IE versions this approach won't work for you.

var target = $('#target');
$('#in').on("change", function() {
  var value = ~~($(this).val());
  value = Math.max(value, 2);
  $(this).val(value);
  target.css('background-size', value);
}).trigger("change");

#target {
  width: 400px;
  height: 400px;
  border: 2px solid #CCC;
  margin-top: 5px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="in" type="number" value="20" />
<div id="target" />