Page Widget How to - Create CSS3 striped background

Question

We would like to know how to create CSS3 striped background.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!--from  www .j  av a2 s  . c o  m-->
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, .2) 25%,
    transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%,
    rgba(0, 0, 0, .2) 75%, transparent 75%, transparent);
  background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, .2) 25%,
    transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%,
    rgba(0, 0, 0, .2) 75%, transparent 75%, transparent);
  -moz-background-size: 4px 4px;
  background-size: 6px 6px;
}
</style>
</head>
<body>
</body>
</html>

The code above is rendered as follows: