JSFiddle - React, Tailwind, and code Playground

by ryanseddon

HTML

<script src="http://modernizr.github.com/Modernizr/modernizr.js"></script>
<div class="box box-1">
    </div>
  
    <div class="box box-2">
    </div>
  
    <div class="box box-3">
    </div>

CSS

.box {
    width: 550px;
    height: 300px;
    margin-bottom: 30px;
    border: solid 1px #222;
  }
  
  .box-1 {
    background-color: transparent;
    background-image: url(http://cdn.impressivewebs.com/3923/vectorian-bg.png);
    background-repeat: repeat; 
    background-position: 0 0;
  }
  
  .box-2 {
    background: transparent url(http://cdn.impressivewebs.com/3923/vectorian-bg.png) space 0 0;
  }
  
  .box-3 {
    background: transparent url(http://cdn.impressivewebs.com/3923/vectorian-bg.png) round 0 0;
  }

JavaScript

// developer.mozilla.org/en/CSS/background-repeat

// test page: jsbin.com/uzesun/

(function(){
    
    console.dir(window.getComputedStyle(document.querySelector(".box-1"),null));

function getBgRepeatValue(elem){
    return (window.getComputedStyle ?
             getComputedStyle(elem, null).getPropertyValue('background') :
             elem.currentStyle['background']);
}
  

Modernizr.testStyles(' #modernizr { background-repeat: round; } ', function(elem, rule){ 

  Modernizr.addTest('bgrepeatround', getBgRepeatValue(elem) == 'round');
      console.log(getBgRepeatValue(elem));  

});



Modernizr.testStyles(' #modernizr { background-repeat: space; } ', function(elem, rule){ 

  Modernizr.addTest('bgrepeatspace', getBgRepeatValue(elem) == 'space');
      console.log(getBgRepeatValue(elem));  

});


})();