Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  .box {
    width: 550px;
    height: 300px;
    margin-bottom: 30px;
    border: solid 1px #222;
  }
  
  .box-1 {
    background: transparent url(http://cdn.impressivewebs.com/3923/vectorian-bg.png) repeat 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;
  }
  
  #message {
    position: absolute;
    top: 200px;
    left: 600px;
    padding: 20px;
    border: solid 2px red;
  }
  
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
</head>
<body>
  
    <div class="box box-1">
    </div>
  
    <div class="box box-2">
    </div>
  
    <div class="box box-3">
    </div>
  
    <div id="message">
    </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  
  <script>
    (function(){
    function getBgRepeatValue(elem) {
        return (window.getComputedStyle ?
                 getComputedStyle(elem, null).getPropertyValue('background-repeat') :
                 elem.currentStyle['background-repeat']);
    }
    Modernizr.testStyles(' #modernizr { background-repeat: round; } ', function(elem, rule){ 
        Modernizr.addTest('bgrepeatround', getBgRepeatValue(elem) == 'round');
    });
    Modernizr.testStyles(' #modernizr { background-repeat: space; } ', function(elem, rule) { 
        Modernizr.addTest('bgrepeatspace', getBgRepeatValue(elem) == 'space');
    });
    
    })();
    
    $(function(){
        if (Modernizr.bgrepeatspace && Modernizr.bgrepeatspace) {
        $("#message").html("THIS BROWSER SUPPORTS SPACE AND ROUND");
    } else {
        $("#message").html("THIS BROWSER DOES NOT SUPPORT SPACE AND ROUND");
    }
      
    });
  </script>
</body>
</html>
 
if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers