Is there a way to draw horizontal lines and dashed lines in the background of a div with JavaScript or CSS, without using a repeated image? Basically to achieve something that looks like the image below?

Is there a way to draw horizontal lines and dashed lines in the background of a div with JavaScript or CSS, without using a repeated image? Basically to achieve something that looks like the image below?

• javascript
• html
• css
• linear-gradients

• does a base64 encoded image count as an image? :P – Joseph Marikle Commented Jan 19, 2016 at 23:07
• What about using one (ridiculously large) background image? I suspect you want to avoid all use of images, but you need to clarify. What about CSS gradients, for example, or a grid of elements behind a partially transparent element? – David Thomas Commented Jan 19, 2016 at 23:07
• I guess the bigger question is why do you not want to use a repeating image? – Joseph Marikle Commented Jan 19, 2016 at 23:09
• Is the grid size limited in any way? – Alexander Pavlov Commented Jan 19, 2016 at 23:11
• Here's a start: jsfiddle/2kmUg/466 – fnune Commented Jan 19, 2016 at 23:18

1 Answer 1

It is possible to create this pattern with pure CSS by using a bination of linear-gradient images and radial-gradient images for the background. The linear gradients produce the solid vertical and horizontal lines whereas the radial gradients produce the dotted lines in the middle.

As you would see from the output, it is not exactly as in the image provided in question because of the dots being a bit wide apart from each other and size of the dots being larger. If we reduce the dot size, it starts looking more like dashes/square blocks instead of dots.

^{Note: I tried to get the dots done with just a single radial gradient but it made the dots appear above (or behind) the solid line also and hence had to do with two radial gradients.}

.div-with-pattern {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to bottom, #AAA 1px, transparent 1px), linear-gradient(to right, #AAA 1px, transparent 1px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px);
  background-size: 40px 60px, 120px 40px, 12px 60px, 12px 60px;
  background-position: 0px 0px, 0px 0px, 0px -10px, 0px 10px;
}
body {
  margin: 0;
  padding: 0;
}

<!-- prefix free library is only to avoid browser prefixes, it is optional -->
<script src="https://cdnjs.cloudflare./ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="div-with-pattern"></div>

Below snippet shows how the pattern appears when the space between the dots is reduced. The dots can't be made much smaller than their current size because if their radius is reduced any further, they bee invisible.

.div-with-pattern {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to bottom, #AAA 1px, transparent 1px), linear-gradient(to right, #AAA 1px, transparent 1px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px);
  background-size: 40px 60px, 120px 40px, 6px 60px, 6px 60px;
  background-position: 0px 0px, 0px 0px, 0px -10px, 0px 10px;
}
body {
  margin: 0;
  padding: 0;
}

<!-- prefix free library is only to avoid browser prefixes, it is optional -->
<script src="https://cdnjs.cloudflare./ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="div-with-pattern"></div>

Below snippet shows what happens when we reduce the size of the dots. This seems more closer to your original image because they look more like dashes to me than dots but I am not sure because your title says otherwise.

.div-with-pattern {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to bottom, #AAA 1px, transparent 1px), linear-gradient(to right, #AAA 1px, transparent 1px), radial-gradient(1px 1px at center, #AAA .5px, transparent 1px), radial-gradient(1px 1px at center, #AAA .5px, transparent 1px);
  background-size: 40px 60px, 120px 40px, 6px 60px, 6px 60px;
  background-position: 0px 0px, 0px 0px, 0px -10px, 0px 10px;
}
body {
  margin: 0;
  padding: 0;
}

<!-- prefix free library is only to avoid browser prefixes, it is optional -->
<script src="https://cdnjs.cloudflare./ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="div-with-pattern"></div>