How do you make the background of a div
element dotted without using an image?
You can use a combination of background-image
and gradient
to achieve this:
div {
width: 200px;
height: 200px;
background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%),
-moz-linear-gradient(-45deg, #666 25%, transparent 25%),
-moz-linear-gradient(45deg, transparent 75%, #666 75%),
-moz-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%),
-webkit-linear-gradient(-45deg, #666 25%, transparent 25%),
-webkit-linear-gradient(45deg, transparent 75%, #666 75%),
-webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%),
-o-linear-gradient(-45deg, #666 25%, transparent 25%),
-o-linear-gradient(45deg, transparent 75%, #666 75%),
-o-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: linear-gradient(45deg, #666 25%, transparent 25%),
linear-gradient(-45deg, #666 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #666 75%),
linear-gradient(-45deg, transparent 75%, #666 75%);
-moz-background-size: 2px 2px;
background-size: 2px 2px;
-webkit-background-size: 2px 2.1px; /* override value for webkit */
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}
<div></div>
Added -moz
and -webkit
to support more browsers.
See more here in English OS: link
div {
text-align: center;
font: bold 21px 'Oswald',sans-serif;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999;
text-transform: uppercase;
width:50%;
height:50%;
}
.dotted {
padding: 2.25em 1.6875em;
background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
background-size: 3px 3px;
}
.stripped {
padding: 2.25em 1.6875em;
background-image: -webkit-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
background-image: -moz-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
background-image: -o-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
background-size: 4px 4px;
}
<div class="dotted">Pontilhado</div>
<div class="stripped">Listrado</div>
changing px values if you get interesting effects