Maurice Maurice - 1 month ago 22
CSS Question

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?

Answer

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