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>
  <div class="header">
    Cras luctus scelerisque lectus eget interdum. Duis quis magna nisl. Aenean venenatis faucibus lorem eget auctor. Nam nulla dolor, blandit a nunc malesuada, viverra tincidunt dui.
  </div>
  <div id="div1" class="content">
    Cras luctus scelerisque lectus eget interdum. Duis quis magna nisl. Aenean venenatis faucibus lorem eget auctor. Nam nulla dolor, blandit a nunc malesuada, viverra tincidunt dui. Etiam imperdiet imperdiet enim eu vestibulum. Quisque accumsan tortor ac lobortis hendrerit. Quisque euismod lectus nunc, ut tempus est porttitor in. In hac habitasse platea dictumst.
​
Vestibulum lectus purus, ultrices et velit eu, molestie lobortis dui. Sed quis nulla nec nulla bibendum vestibulum. Pellentesque vitae felis in elit interdum auctor eget nec nisi. Etiam posuere risus nulla, quis pharetra metus lobortis quis. Maecenas molestie erat sit amet interdum venenatis. Suspendisse potenti. Sed quis egestas mi, a sodales enim. Curabitur nec suscipit sem, at sodales justo. Nullam vulputate vehicula metus, eget varius nulla. Etiam id diam lobortis dui pellentesque congue vel non sem. Donec vel neque ultrices, commodo lectus sit amet, fermentum sem. Suspendisse varius, nulla in eleifend lobortis, ipsum risus porta felis, in vehicula neque quam sed mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras varius odio id neque scelerisque ornare. Proin lacinia sapien id orci sagittis imperdiet.
  </div>
  <div class="header">
    Cras luctus scelerisque lectus eget interdum. Duis quis magna nisl. Aenean venenatis faucibus lorem eget auctor. Nam nulla dolor, blandit a nunc malesuada, viverra tincidunt dui.
  </div>
  <div id="div2" class="content">
    Vestibulum iaculis pretium justo, a sodales orci varius eget. Vivamus vulputate semper massa, non laoreet metus tincidunt a. Cras vulputate enim ac neque gravida, ultrices consequat ante auctor. Aenean ut pellentesque tortor. Fusce id tincidunt eros. Vestibulum malesuada massa in fringilla porta. Donec libero purus, congue vitae tortor quis, varius condimentum lacus. Proin tincidunt lacus sit amet imperdiet varius. Pellentesque ut dignissim elit, at scelerisque mauris. In pharetra vel dolor sed congue. Maecenas interdum ornare nunc a mattis. Maecenas sit amet adipiscing velit, in tincidunt enim. Ut ut sem nulla. Etiam consequat egestas imperdiet.
​
Praesent lacinia sodales dolor sed gravida. Praesent eget sapien odio. Praesent placerat sem ac eleifend ultrices. In consequat massa a sapien vulputate, vitae feugiat tortor pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur lobortis suscipit est sed sodales. Praesent nibh diam, fringilla eu turpis et, elementum fringilla purus. Integer bibendum varius ligula at ornare. Ut pharetra nisi 
  </div>
</body>
</html>
 
html{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
div.header{
  background:white;
  font-size:20px;
}
div.content{
  margin:0;
  padding:0;
  width: 100%;
  height: 100%;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:black;
  background-size:100% auto;
  color:white;
  font-size:30px;
}
#div1{
  background-image:url("http://craiggarner.net/haven2/img/h1.jpg");
}
#div2{
  background-image:url("http://craiggarner.net/haven2/img/d2.jpg");
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers