diff --git a/modules/renderer/background.js b/modules/renderer/background.js
index 69f38667e..e6ee5d051 100644
--- a/modules/renderer/background.js
+++ b/modules/renderer/background.js
@@ -1,12 +1,14 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { interpolateNumber as d3_interpolateNumber } from 'd3-interpolate';
 import { select as d3_select } from 'd3-selection';
+import turf_bboxClip from '@turf/bbox-clip';
+import turf_bbox from '@turf/bbox';
 
 import whichPolygon from 'which-polygon';
 
 import { prefs } from '../core/preferences';
 import { fileFetcher } from '../core/file_fetcher';
-import { geoMetersToOffset, geoOffsetToMeters} from '../geo';
+import { geoMetersToOffset, geoOffsetToMeters, geoExtent } from '../geo';
 import { rendererBackgroundSource } from './background_source';
 import { rendererTileLayer } from './tile_layer';
 import { utilQsString, utilStringQs } from '../util';
@@ -463,7 +465,15 @@ export function rendererBackground(context) {
 
       let best;
       if (!requestedBackground && extent) {
-        best = validBackgrounds.find(s => s.best());
+        const viewArea = extent.area();
+        best = validBackgrounds.find(s => {
+          if (!s.best() || s.overlay) return false;
+          let bbox = turf_bbox(turf_bboxClip(
+                { type: 'MultiPolygon', coordinates: [ s.polygon || [extent.polygon()] ] },
+                extent.rectangle()));
+          let area = geoExtent(bbox.slice(0,2), bbox.slice(2,4)).area();
+          return area / viewArea > 0.5; // min visible size: 50% of viewport area
+        });
       }
 
       // Decide which background layer to display
diff --git a/package.json b/package.json
index 00e084c74..75f2f88d0 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@mapbox/vector-tile": "^1.3.1",
     "@tmcw/togeojson": "^5.2.1",
     "@turf/bbox-clip": "^6.0.0",
+    "@turf/bbox": "^6.0.0",
     "abortcontroller-polyfill": "^1.4.0",
     "aes-js": "^3.1.2",
     "alif-toolkit": "^1.2.9",