Fill div with vertical or horizontal lines - html

Question

How do I fill a div with vertical or horizontal lines? I did this last year, can't find the code and have no idea what to search for other than "fill div with lines" which yields no related results.
Here's a pic to show what I mean:
I really would prefer to do this with pure CSS, if possible.

Answer 1

You should try using a CSS linear-gradient that is oriented horizontally and repeats along the same axis:
div {
background-image: linear-gradient(to left, #c8d9ff 50%, transparent 50%);
background-size: 4px 100%;
}
We only need to specify the middle colour stop (at 50%), because with the 0% and 100% stops ignored the browser's rendering engine will automatically extrapolate the colours on each end from the two middle colour stops. This is the equivalent of the longer (and unnecessary) code:
div {
background-image: linear-gradient(to left, #c8d9ff 0%, #c8d9ff 50%, transparent 50%, transparent 100%);
background-size: 4px 100%;
}
Notes:
You might want to add vendor prefixes for this, since the latest linear-gradient specification might not be supported across all browsers, depending on your user demographic.
You might want to specify a solid background-color for older browsers to fall back to.
See proof-of-concept example here: JSFiddle

Answer 2

Hey you need just lines?? or a small divs inside div?
For horizontal line, you can use following tag.
<hr/>

Answer 3

you could do it with a repeating linear gradient.
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient

Answer 4

This is one possible solution (jsfiddle: http://jsfiddle.net/nmL78/):
HTML:
<div class="stripe"></div>
CSS:
.stripe{
background-color: blue;
width:100%;
height: 50px;
top:50px;
position: absolute;
}
Adjust the CSS at will...