Having Striped Dashed lines as background - css

Question

Is it possible to have this striped and dashed background with CSS only?
Background is created by Chrome when inspecting flex elements, and I find it really cool.

Answer 1

You can use repeating-linear-gradient like this:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100w;
background: repeating-linear-gradient(
45deg,
tomato 0px,
tomato 2px,
transparent 2px,
transparent 9px
);
}
div {
height: 100vh;
width: 100vw;
background: repeating-linear-gradient(
-45deg,
white 0px,
white 4px,
transparent 4px,
transparent 12px
);
}
<div></div>
Tweak with the code
These few lines do produce a somewhat similar pattern, but it won't look good on a low DPI screen. So, in my opinion, it's better to use an SVG pattern instead of pure CSS.

Answer 2

You can use repeating-linear-gradient but i couldn't make it dashed:
//Example
body, html {
background: repeating-linear-gradient(
-55deg,
#606dbc,
#606dbc 5px,
#465298 5px,
#465298 10px
);
}

Answer 3

Here's the SVG solution to my problem. CSS doesn't look to good.
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<!-- Let's define the pattern -->
<!-- The width and height should be double the size of a single checker -->
<pattern id="pattern-checkers" x="0" y="0" width="100%" height="15" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<!-- Two instances of the same checker, only positioned apart on the `x` and `y` axis -->
<!-- We will define the `fill` in the CSS for flexible use -->
<line x1="0" y1="7" x2="100%" y2="7" stroke="#F3817F"
stroke-dasharray="8 4" />
</pattern>
<!-- Define the shape that will contain our pattern as the fill -->
<rect x="0%" y="0" width="100%" height="100%" fill="url(#pattern-checkers)"></rect>
</svg>

Answer 4

I suggest to use patterns for creating wonderful backgrounds: http://projects.verou.me/css3patterns/