Q:

CSS3 drawn background grid lines start with half a grid

I have a background with grid lines drawn using CSS. You can see it in this fiddle 
It looks ok, but the grid is starting with a quarter of a square and I want it to start with a whole square. How to do this?
I have tried using margin-left -50px; but this influences the content in this DIV aswell (which I don't want).
The CSS:
.board {
    position: absolute;
    margin: 0px;
    top: 0px;
    left: 0px;
    width: 576px;
    height: 576px;
    background-color: #434343;
    background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent);
    background-size: 100px 100px;
}

Any ideas on this?

A:

You can add the background-position element to your class:
.board {
    background-position: 27px 27px;
}

The first value is the horizontal position and the second value is the vertical. You can also use % instead of px

