That Half-Drop Image Grid From
The Royal Tenenbaums
. JavaScript

  data-halfdrop = "wes1.jpg"
      A brand-new JavaScript file for repeating an HTML element's background image in a centered half-drop pattern, like that thing (1, 2, 3) from that movie. Each pattern is customizable through JSON data attributes, with properties based off CSS naming standards.

Available On Github, Built By Tyler

View More Samples

3 Ways To Use

1HTML + Inline URL

  data-halfdrop = 'wes1.jpg'


figure {
  background: url('wes1.jpg')



  data-halfdrop = '{
    "src"      : "wes1.jpg",
    "width"    : "20%",
    "maxWidth" : 200
Default values
"src"       : "",

String of the image's URL
(If not given, CSS URL will be used)

"snap"      : false,

Changes width of image to create a whole number of columns, only respecting one min/max property

"minWidth"  : 0,
"maxWidth"  : "100%",
"width"     : 0,
"minHeight" : 0,
"maxHeight" : "100%",
"height"    : 0

Can be a number or string ending in 'px' or '%'

2 Steps To Run

1Link The Javascript File

<script src="ThatHalfDropImageGridFromTheRoyalTenenbaums.js"></script>
This creates the object_halfdrop

2Set An Event To Update The Background


When a data-halfdrop element resizes, it's background needs to update

Example hook
window.onresize =


1Add Or Remove data-halfdrop Elements


Run this function after an element is added or removed

2Change Dafault Values


The exposed object's properties can be modified, which may reduce overall markup in some situations

If it's modified after DOMContentLoaded, run _halfdrop.init()