Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <p>Original image is 273 x 286 px, and has a transparent area around the outside of roughly 45px.</p>
​
<div class="one"><code>background-size: auto auto;</code></div>
<div class="two"><code>background-size: contain;</code></div>
<div class="three"><code>background-size: cover;</code></div>
<div class="four"><code>background-size: 20% 25%;</code></div>
<div class="five"><code>background-size: 100px 400px;</code></div>
<div class="six"><code>background-size: 100% 250px;</code></div>
<div class="seven"><code>background-size: 100% 250px, 20% 25%;</code></div>
  
</body>
</html>
​
 
/**
 * background-size example
 */
 
 div {
   width: 17%;
   height: 200px;
   padding: 10px;
   border-radius: 20px;
   box-shadow: 2px 2px 10px rgba(0,0,0,0.75);
   float: left;
   margin: 0 20px 20px 0;
   background-color: rgba(0,0,0,0.25);
   background-image: url(http://www.webplatform.org/logo/wplogo_transparent_xlg.png);
 }
 
 code {
   background-color: rgba(255,255,255,0.7);
   padding: 2px;
   border-radius: 5px
 }
​
.one {
  background-size: auto auto;
}
​
.two {
  background-size: contain;
}
​
.three {
  background-size: cover;
}
​
.four {
  background-size: 20% 25%;
}
​
.five {
  background-size: 100px 400px;
}
​
.six {
  background-size: 100% 250px;
}
​
.seven {
  background-image: url(http://www.webplatform.org/logo/wplogo_transparent_xlg.png), url(http://www.webplatform.org/logo/wplogo_transparent_xlg.png);
  background-size: 100% 250px, 20% 25%;
}
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers