Advanced Search

Transparent Background Pattern

/ Published in: CSS
Save to your folder(s)
adds a checkered background to images, so images with transparency are revealed.

based upon: http://lea.verou.me/css3patterns/#checkerboard

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. img {
  2.   background-color: #FEFEFE;
  3.   background-image: -webkit-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -webkit-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB);
  4.   background-image: -moz-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -moz-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB);
  5.   background-image: -o-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -o-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB);
  6.   background-image: -ms-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -ms-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB);
  7.   background-image: linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB);
  8.   -webkit-background-size:30px 30px;
  9.   -moz-background-size:30px 30px;
  10.   background-size:30px 30px;
  11.   background-position:0 0, 15px 15px;
  12. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.