0

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?

Maurice
  • 1,147
  • 2
  • 21
  • 49

2 Answers2

3

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

jleggio
  • 1,266
  • 1
  • 9
  • 16
0
#page {
        background-color:#269;
        background-image: linear-gradient(white 2px, transparent 2px),
        linear-gradient(90deg, white 2px, transparent 2px),
        linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
        background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
        background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px
    }
Ravshanbek Ahmedov
  • 251
  • 6
  • 9