Having Striped Dashed lines as background

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>

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.

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
   );
}

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>

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