Pure CSS patterned background? - html

Question

I have a body tag that needs serious decorating. I want to refrain from downloading images and/or using libraries. I have tried using many different background-colors to decorate my body tag, but it is just not working.
Here's what I need:
Pure CSS striped pattern (no images)
Pure CSS spotted pattern (polkadot, no images)
Way to split my body tag into four quadrants, each with different background
Generate pure css combo of 1 & 2?
I have searched for the answers to these, but I could only find image generators. I know there is a way to make gradients, but is there a way to make other pure CSS patterns, or should I download images?

Answer 1

You can use CSS3 background property to design almost anything you like, there are also websites that can generate css codes like this one for example:
body {
background-color:#ccc;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}