Display a background grid using an image using CSS

Question

UPDATED DEMO works quite well, except that when changing the background image changes:

background-size: 20px 20px; 

Is it possible to keep the original image size and combine background images (hide the part of the image that exceeds the upper left flag (20px 20px))?

Plan B should be to crop the image using JS in the installed contents of the base64 image ...

Answer 1

Using svg image only with left and top border maybe what you are looking for? Check this snippet or jsfiddle (the script contains a button to increase / decrease the grid):

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

Answer 2

I would highly recommend not using a scaled image if you are aiming for sharp and solid results with a background that repeats over time. Here's a good, 100% software way to do this with JS and Canvas. The entire JS block, as described here, takes about half a millisecond to complete.

Here 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 simple:

 <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 have to do is echo the width and height that you do not use in this canvas tag (it is best to use the server-side technology that you use) and everything will be done automatically .

Let me explain this: ctx.rect(-1, -1, ++w, ++h); We take the required width and height and put it in variables, then when drawing our rectangle we want the width to start with [-1, -1] coordinates, so we don’t have the left and top borders painted (we don’t need this if we want our pattern to be uneven), and ++w and ++h simply increase the width and height of the colored rectangle by one pixel to go beyond the canvas and thus separate these two non-zero borders.

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

By going this way, you can also control the line width as well as the color.

Answer 3

One option is to use a CSS gradient.
This is shown below for the line pattern, but you can easily expand it to have a second background in the other direction.
You will also need to add any browser prefixes if your project requires backward compatibility. If you need to support older versions of IE, this approach will not 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" />