diff --git a/combobox.html b/combobox.html
index 663355663..72c7ea538 100644
--- a/combobox.html
+++ b/combobox.html
@@ -61,7 +61,7 @@
         <script src='js/id/ui/success.js'></script>
         <script src='js/id/ui/loading.js'></script>
         <script src='js/id/ui/account.js'></script>
-        <script src='js/id/ui/layerswitcher.js'></script>
+        <script src='js/id/ui/background.js'></script>
         <script src='js/id/ui/contributors.js'></script>
         <script src='js/id/ui/geocoder.js'></script>
         <script src='js/id/ui/geolocate.js'></script>
diff --git a/css/app.css b/css/app.css
index a573474d8..fecf8e61f 100644
--- a/css/app.css
+++ b/css/app.css
@@ -963,9 +963,9 @@ div.combobox {
     border-top:0;
 }
 
-/* Layer Switcher */
+/* Background Settings */
 
-.layerswitcher-control {
+.background-control {
     top:190px;
 }
 
@@ -973,7 +973,7 @@ div.combobox {
     margin-top: 10px;
 }
 
-.layerswitcher-control .adjustments button {
+.background-control .adjustments button {
     height:30px;
     font-size:10px;
     padding:0 5px 3px 5px;
@@ -982,7 +982,7 @@ div.combobox {
     font-weight: bold;
 }
 
-.layerswitcher-control .adjustments button:hover {
+.background-control .adjustments button:hover {
     background:#ececec;
 }
 
@@ -1012,7 +1012,7 @@ div.combobox {
     border-left:  4px solid transparent;
 }
 
-.layerswitcher-control .nudge {
+.background-control .nudge {
     text-indent: -9999px;
     overflow: hidden;
     width:16.6666%;
@@ -1021,7 +1021,7 @@ div.combobox {
     position: relative;
 }
 
-.layerswitcher-control .nudge::after {
+.background-control .nudge::after {
     content: '';
     display: block;
     position: absolute;
@@ -1031,35 +1031,35 @@ div.combobox {
     width: 0;
 }
 
-.layerswitcher-control .nudge.left::after {
+.background-control .nudge.left::after {
     border-top:  5px solid transparent;
     border-bottom:  5px solid transparent;
     border-left:  5px solid #222;
 }
 
-.layerswitcher-control .nudge.right::after {
+.background-control .nudge.right::after {
     border-top:  5px solid transparent;
     border-bottom:  5px solid transparent;
     border-right:  5px solid #222;
 }
 
-.layerswitcher-control .nudge.top::after {
+.background-control .nudge.top::after {
     border-right:  5px solid transparent;
     border-left:  5px solid transparent;
     border-bottom:  5px solid #222;
 }
 
-.layerswitcher-control .nudge.bottom::after {
+.background-control .nudge.bottom::after {
     border-right:  5px solid transparent;
     border-left:  5px solid transparent;
     border-top:  5px solid #222;
 }
 
-.layerswitcher-control .nudge:first-child {
+.background-control .nudge:first-child {
     border-radius: 4px 0 0 4px;
 }
 
-.layerswitcher-control .reset {
+.background-control .reset {
     width: 33.3333%;
     border-radius: 0 4px 4px 0;
 }
@@ -1092,18 +1092,18 @@ div.combobox {
     z-index: 9999;
 }
 
-.layerswitcher-control li:hover .select-box,
-.layerswitcher-control li.selected .select-box {
+.background-control li:hover .select-box,
+.background-control li.selected .select-box {
     border: 2px solid #7092ff;
     background: rgba(89, 123, 231, .5);
     opacity: .5;
 }
-.layerswitcher-control li.selected:hover .select-box,
-.layerswitcher-control li.selected .select-box {
+.background-control li.selected:hover .select-box,
+.background-control li.selected .select-box {
     opacity: 1;
 }
 
-.layerswitcher-control .opacity {
+.background-control .opacity {
     background:#222;
     display:inline-block;
     width:20px;
@@ -1528,16 +1528,14 @@ a.success-action {
 .tooltip {
     width: 200px;
     position: absolute;
-    z-index: -1000;
-    height: 0;
-    opacity: 0;
-    display: block;
+    display: none;
 }
 
 .tooltip.in {
     opacity: 0.8;
     z-index: 1030;
     height: auto;
+    display: block;
 }
 
 .tooltip.top {
diff --git a/index.html b/index.html
index 4894aed75..83b50cecc 100644
--- a/index.html
+++ b/index.html
@@ -72,7 +72,7 @@
         <script src='js/id/ui/success.js'></script>
         <script src='js/id/ui/loading.js'></script>
         <script src='js/id/ui/account.js'></script>
-        <script src='js/id/ui/layerswitcher.js'></script>
+        <script src='js/id/ui/background.js'></script>
         <script src='js/id/ui/modes.js'></script>
         <script src='js/id/ui/contributors.js'></script>
         <script src='js/id/ui/geocoder.js'></script>
diff --git a/js/id/ui.js b/js/id/ui.js
index 1cb7bdd22..d4e0fa10a 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -57,8 +57,8 @@ iD.ui = function(context) {
             .call(iD.ui.Geocoder(context));
 
         container.append('div')
-            .attr('class', 'map-control layerswitcher-control')
-            .call(iD.ui.LayerSwitcher(context));
+            .attr('class', 'map-control background-control')
+            .call(iD.ui.Background(context));
 
         container.append('div')
             .attr('class', 'map-control geolocate-control')
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/background.js
similarity index 60%
rename from js/id/ui/layerswitcher.js
rename to js/id/ui/background.js
index be25c9df8..69991430f 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/background.js
@@ -1,4 +1,4 @@
-iD.ui.LayerSwitcher = function(context) {
+iD.ui.Background = function(context) {
     var event = d3.dispatch('cancel', 'save'),
         opacities = [1, 0.5, 0];
 
@@ -12,27 +12,29 @@ iD.ui.LayerSwitcher = function(context) {
         });
     }
 
-    function layerswitcher(selection) {
+    function background(selection) {
 
-        var content = selection
-            .append('div').attr('class', 'content fillD map-overlay hide'),
+        var content = selection.append('div')
+                .attr('class', 'content fillD map-overlay hide'),
             shown = false;
 
-        var tooltip = bootstrap.tooltip().placement('right');
+        var tooltip = bootstrap.tooltip()
+            .placement('right');
 
-        var button = selection
-            .append('button')
+        var button = selection.append('button')
             .attr('tabindex', -1)
             .attr('class', 'fillD')
-            .attr('title', t('layerswitcher.description'))
-            .on('click.layerswitcher-toggle', toggle)
+            .attr('title', t('background.description'))
+            .on('click.background-toggle', toggle)
             .call(tooltip);
 
         button.append('span')
             .attr('class', 'layers icon');
 
-        function hide() { setVisible(false); }
-        function toggle() { tooltip.hide(button); setVisible(content.classed('hide')); }
+        function toggle() {
+            tooltip.hide(button);
+            setVisible(content.classed('hide'));
+        }
 
         function setVisible(show) {
             if (show !== shown) {
@@ -42,18 +44,20 @@ iD.ui.LayerSwitcher = function(context) {
             }
         }
 
-        function clickoutside(selection) {
-            selection.on('click.layerswitcher-inside', function() {
-                return d3.event.stopPropagation();
-            });
-            context.container().on('click.layerswitcher-outside', hide);
-        }
+        selection.on('click.background-inside', function() {
+            return d3.event.stopPropagation();
+        });
+
+        context.container().on('click.background-outside', function() {
+            setVisible(false);
+        });
 
         var opa = content
             .append('div')
             .attr('class', 'opacity-options-wrapper');
 
-        opa.append('h4').text(t('layerswitcher.title'));
+        opa.append('h4')
+            .text(t('background.title'));
 
         var opacityList = opa.append('ul')
             .attr('class', 'opacity-options');
@@ -73,18 +77,20 @@ iD.ui.LayerSwitcher = function(context) {
             .data(opacities)
             .enter()
             .append('li')
-                .attr('data-original-title', function(d) {
-                    return t('layerswitcher.percent_brightness', { opacity: (d * 100) });
-                })
-                .on('click.set-opacity', setOpacity)
-                .html("<div class='select-box'></div>")
-                .call(bootstrap.tooltip().placement('top'))
-                .append('div')
-                    .attr('class', 'opacity')
-                    .style('opacity', String);
+            .attr('data-original-title', function(d) {
+                return t('background.percent_brightness', { opacity: (d * 100) });
+            })
+            .on('click.set-opacity', setOpacity)
+            .html("<div class='select-box'></div>")
+            .call(bootstrap.tooltip()
+                .placement('top'))
+            .append('div')
+            .attr('class', 'opacity')
+            .style('opacity', String);
 
         // Make sure there is an active selection by default
-        opa.select('.opacity-options li:nth-child(2)').classed('selected', true);
+        opa.select('.opacity-options li:nth-child(2)')
+            .classed('selected', true);
 
         function selectLayer(d) {
 
@@ -137,32 +143,40 @@ iD.ui.LayerSwitcher = function(context) {
                 .data(getSources(), function(d) {
                     return d.data.name;
                 });
-            layerLinks.exit().remove();
-            var LayerInner = layerLinks.enter()
+
+            var layerInner = layerLinks.enter()
                 .append('li')
-                .append('a')
-                    .attr('data-original-title', function(d) {
-                        return d.data.description || '';
-                    })
-                    .attr('href', '#')
-                    .attr('class', 'layer')
-                    .each(function(d) {
-                        // only set tooltips for layers with tooltips
-                        if (d.data.description) {
-                            d3.select(this).call(bootstrap.tooltip().placement('right'));
-                        }
-                    })
-                    .on('click.set-source', clickSetSource);
-                    LayerInner.insert('span')
-                    .attr('class','icon toggle');
-                    LayerInner.insert('span').text(function(d) {
-                        return d.data.name;
-                    });
+                .append('a');
+
+            layerInner
+                .attr('href', '#')
+                .attr('class', 'layer')
+                .on('click.set-source', clickSetSource);
+
+            // only set tooltips for layers with tooltips
+            layerInner
+                .filter(function(d) { return d.data.description; })
+                .call(bootstrap.tooltip()
+                    .title(function(d) { return d.data.description; })
+                    .placement('right')
+                );
+
+            layerInner.insert('span')
+                .attr('class', 'icon toggle');
+
+            layerInner.insert('span').text(function(d) {
+                return d.data.name;
+            });
+
+            layerLinks.exit()
+                .remove();
 
             selectLayer(context.background().source());
         }
 
-        context.map().on('move.layerswitcher-update', _.debounce(update, 1000));
+        context.map().on('move.background-update', _.debounce(update, 1000));
+
+        update();
 
         var adjustments = content
             .append('div')
@@ -174,23 +188,14 @@ iD.ui.LayerSwitcher = function(context) {
             ['right', [1, 0]],
             ['bottom', [0, 1]]];
 
-        function nudge(d) {
-            context.background().nudge(d[1], context.map().zoom());
-            context.redraw();
-        }
-
         adjustments.append('a')
-            .text(t('layerswitcher.fix_misalignment'))
+            .text(t('background.fix_misalignment'))
             .attr('href', '#')
             .classed('hide-toggle', true)
             .classed('expanded', false)
             .on('click', function() {
                 var exp = d3.select(this).classed('expanded');
-                if (!exp) {
-                    nudge_container.style('display', 'block');
-                } else {
-                    nudge_container.style('display', 'none');
-                }
+                nudge_container.style('display', exp ? 'none' : 'block');
                 d3.select(this).classed('expanded', !exp);
                 d3.event.preventDefault();
             });
@@ -205,19 +210,19 @@ iD.ui.LayerSwitcher = function(context) {
             .append('button')
             .attr('class', function(d) { return d[0] + ' nudge'; })
             .text(function(d) { return d[0]; })
-            .on('click', nudge);
+            .on('click', function(d) {
+                context.background().nudge(d[1], context.map().zoom());
+                context.redraw();
+            });
 
         nudge_container.append('button')
-            .text(t('layerswitcher.reset'))
+            .text(t('background.reset'))
             .attr('class', 'reset')
             .on('click', function() {
                 context.background().offset([0, 0]);
                 context.redraw();
             });
-
-        selection.call(clickoutside);
-        selectLayer(context.background().source());
     }
 
-    return d3.rebind(layerswitcher, event, 'on');
+    return d3.rebind(background, event, 'on');
 };
diff --git a/locale/da.js b/locale/da.js
index 9b290492d..65b7a1a64 100644
--- a/locale/da.js
+++ b/locale/da.js
@@ -188,7 +188,7 @@ locale.da = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Baggrund",
         description: "Baggrundsindstillinger",
         percent_brightness: "{opacity}% lysstyrke",
diff --git a/locale/de.js b/locale/de.js
index bd9978900..5881f9c60 100644
--- a/locale/de.js
+++ b/locale/de.js
@@ -188,7 +188,7 @@ locale.de = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Hintergrund",
         description: "Hintergrundeinstellungen",
         percent_brightness: "{opacity}% Helligkeit",
diff --git a/locale/en.js b/locale/en.js
index 48f5b736b..3737f3e8c 100644
--- a/locale/en.js
+++ b/locale/en.js
@@ -188,7 +188,7 @@ locale.en = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Background",
         description: "Background Settings",
         percent_brightness: "{opacity}% brightness",
diff --git a/locale/es.js b/locale/es.js
index 76b66234c..baad4c2c1 100644
--- a/locale/es.js
+++ b/locale/es.js
@@ -188,7 +188,7 @@ locale.es = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Fondo", //"Background",
         description: "Configuración de fondo", //"Background Settings",
         percent_brightness: "{opacity}% brillo", //"{opacity}% brightness",
diff --git a/locale/fr.js b/locale/fr.js
index b4e568fd2..81dc39341 100644
--- a/locale/fr.js
+++ b/locale/fr.js
@@ -188,7 +188,7 @@ locale.fr = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Fond de carte",
         description: "Paramètres du fond de carte",
         percent_brightness: "{opacity}% luminosité",
diff --git a/locale/it.js b/locale/it.js
index fe144f233..916e5348f 100644
--- a/locale/it.js
+++ b/locale/it.js
@@ -188,7 +188,7 @@ locale.it = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Sfondo",
         description: "Impostazioni dello sfondo",
         percent_brightness: "{opacity}% opacità",
diff --git a/locale/ja.js b/locale/ja.js
index cf9475bfa..d94a78731 100644
--- a/locale/ja.js
+++ b/locale/ja.js
@@ -188,7 +188,7 @@ locale.ja = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "背景画像",
         description: "背景画像設定",
         percent_brightness: "{opacity}% 輝度",
diff --git a/locale/lv.js b/locale/lv.js
index 0878e3bff..aa27ced1e 100644
--- a/locale/lv.js
+++ b/locale/lv.js
@@ -188,7 +188,7 @@ locale.lv = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Fons",
         description: "Fona iestatījumi",
         percent_brightness: "{opacity}% caurspīdīgums",
diff --git a/locale/nl.js b/locale/nl.js
index ea61e7781..27479c00c 100644
--- a/locale/nl.js
+++ b/locale/nl.js
@@ -188,7 +188,7 @@ locale.nl = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Achtergrond",
         description: "Achtergrondinstellingen",
         percent_brightness: "{opacity}% helderheid",
diff --git a/locale/pl.js b/locale/pl.js
index 80dcfcd82..a84597559 100644
--- a/locale/pl.js
+++ b/locale/pl.js
@@ -188,7 +188,7 @@ locale.pl = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Tło",
         description: "Ustawienia tła",
         percent_brightness: "jasność {opacity}%",
diff --git a/locale/ru.js b/locale/ru.js
index 4b10adfdd..07a1b2f36 100644
--- a/locale/ru.js
+++ b/locale/ru.js
@@ -188,7 +188,7 @@ locale.ru = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Подложка",
         description: "Настройка подложки",
         percent_brightness: "яркость {opacity}%",
diff --git a/locale/tr.js b/locale/tr.js
index fcd0beef4..3c13690d2 100644
--- a/locale/tr.js
+++ b/locale/tr.js
@@ -188,7 +188,7 @@ locale.tr = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Arkaplan",
         description: "Arkaplan Ayarları",
         percent_brightness: "{opacity}% parlaklık",
diff --git a/locale/uk.js b/locale/uk.js
index 0b70fc811..66e761640 100644
--- a/locale/uk.js
+++ b/locale/uk.js
@@ -188,7 +188,7 @@ locale.uk = {
         results: "{n} results for {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Фон",
         description: "Налаштування фону",
         percent_brightness: "прозорість {opacity}%",
diff --git a/locale/vi.js b/locale/vi.js
index 3aef32938..504751f4a 100644
--- a/locale/vi.js
+++ b/locale/vi.js
@@ -188,7 +188,7 @@ locale.vi = {
         results: "{n} kết quả cho {search}"
     },
 
-    layerswitcher: {
+    background: {
         title: "Hình nền",
         description: "Tùy chọn Hình nền",
         percent_brightness: "Sáng {opacity}%",
diff --git a/test/index.html b/test/index.html
index f4aabfd54..b130897cf 100644
--- a/test/index.html
+++ b/test/index.html
@@ -75,7 +75,7 @@
     <script src='../js/id/ui/success.js'></script>
     <script src='../js/id/ui/loading.js'></script>
     <script src='../js/id/ui/account.js'></script>
-    <script src='../js/id/ui/layerswitcher.js'></script>
+    <script src='../js/id/ui/background.js'></script>
     <script src='../js/id/ui/modes.js'></script>
     <script src='../js/id/ui/contributors.js'></script>
     <script src='../js/id/ui/geocoder.js'></script>
@@ -254,6 +254,8 @@
     <script src="spec/modes/add_point.js"></script>
 
     <script src="spec/presets/preset.js"></script>
+    <script src="spec/presets/collection.js"></script>
+    <script src="spec/presets/category.js"></script>
 
     <script>
         (window.mochaPhantomJS || window.mocha).run();
diff --git a/test/spec/presets/category.js b/test/spec/presets/category.js
new file mode 100644
index 000000000..43c1fd068
--- /dev/null
+++ b/test/spec/presets/category.js
@@ -0,0 +1,41 @@
+describe("iD.presets.Category", function() {
+    var category, residential;
+
+    beforeEach(function() {
+        category = {
+            "match": {
+                "type": "line"
+            },
+            "icon": "highway",
+            "name": "roads",
+            "members": [
+                "residential"
+            ]
+        };
+        residential = iD.presets.Preset({
+            name: 'residential',
+            match: {
+                tags: {
+                    highway: 'residential'
+                },
+                type: ['line']
+            }
+        });
+    });
+
+    it("maps members names to preset instances", function() {
+        var c = iD.presets.Category(category, iD.presets.Collection([residential]));
+        expect(c.members.collection[0]).to.eql(residential);
+    });
+
+    describe("#matchType", function() {
+        it("matches the type of an entity", function() {
+            var c = iD.presets.Category(category, iD.presets.Collection([residential])),
+                w = iD.Way(),
+                n = iD.Node(),
+                g = iD.Graph().replace(w);
+            expect(c.matchType(w, g)).to.eql(true);
+            expect(c.matchType(n, g)).to.eql(false);
+        });
+    });
+});
diff --git a/test/spec/presets/collection.js b/test/spec/presets/collection.js
new file mode 100644
index 000000000..8d0a888c7
--- /dev/null
+++ b/test/spec/presets/collection.js
@@ -0,0 +1,68 @@
+describe("iD.prests.Collection", function() {
+
+    var p = {
+        other: iD.presets.Preset({
+            name: 'other',
+            match: {
+                tags: {},
+                type: ['point', 'vertex', 'line', 'area']
+            }
+        }),
+        residential: iD.presets.Preset({
+            name: 'residential',
+            match: {
+                tags: {
+                    highway: 'residential'
+                },
+                type: ['line']
+            }
+        }),
+        park: iD.presets.Preset({
+            name: 'park',
+            match: {
+                tags: {
+                    leisure: 'park'
+                },
+                type: ['point', 'area']
+            }
+        })
+    };
+
+    var c = iD.presets.Collection([p.other, p.residential]),
+        n = iD.Node( { id: 'n1' }),
+        w = iD.Way({ tags: { highway: 'residential' }}),
+        g = iD.Graph().replace(w);
+
+    describe("#item", function() {
+        it("fetches a preset by name", function() {
+            expect(c.item('residential')).to.equal(p.residential);
+        });
+    });
+
+    describe("#matchType", function() {
+        it("returns a new collection only containing presets matching an entity's type", function() {
+            expect(c.matchType(w, g).collection).to.eql([p.other, p.residential]);
+        });
+    });
+
+    describe("#matchTags", function() {
+        it("returns a new collection only containing presets matching an entity's tags", function() {
+            expect(c.matchTags(w, g)).to.eql(p.residential);
+        });
+    });
+
+    describe("#search", function() {
+        it("filters presets by name", function() {
+            expect(c.search("resid").collection.indexOf(p.residential) >= 0).to.eql(true);
+        });
+
+        it("is fuzzy", function() {
+            expect(c.search("rusid").collection.indexOf(p.residential) >= 0).to.eql(true);
+        });
+
+        it("always includes other", function() {
+            expect(c.search("blade of grass").collection.indexOf(p.other) >= 0).to.eql(true);
+        });
+    });
+
+});