diff --git a/lib/src/layer/tile_layer/tile_layer.dart b/lib/src/layer/tile_layer/tile_layer.dart
index 0a45adbe0..b4c88ca84 100644
--- a/lib/src/layer/tile_layer/tile_layer.dart
+++ b/lib/src/layer/tile_layer/tile_layer.dart
@@ -3,7 +3,6 @@ import 'dart:math' as math;
 
 import 'package:collection/collection.dart' show MapEquality;
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:flutter_map/plugin_api.dart';
 import 'package:flutter_map/src/layer/tile_layer/tile.dart';
 import 'package:flutter_map/src/layer/tile_layer/tile_bounds/tile_bounds.dart';
@@ -104,6 +103,11 @@ class TileLayer extends StatefulWidget {
   final TileDisplay tileDisplay;
 
   /// Color shown behind the tiles
+  @Deprecated(
+    'Prefer `MapOptions.backgroundColor`. '
+    'This property has been removed simplify interaction when using multiple `TileLayer`s. '
+    'This property is deprecated since v6.',
+  )
   final Color backgroundColor;
 
   /// Provider with which to load map tiles
@@ -231,7 +235,7 @@ class TileLayer extends StatefulWidget {
     this.subdomains = const <String>[],
     this.keepBuffer = 2,
     this.panBuffer = 0,
-    this.backgroundColor = const Color(0xFFE0E0E0),
+    this.backgroundColor = Colors.transparent,
     this.errorImage,
     TileProvider? tileProvider,
     this.tms = false,
@@ -474,7 +478,8 @@ class _TileLayerState extends State<TileLayer> with TickerProviderStateMixin {
 
     _tileScaleCalculator.clearCacheUnlessZoomMatches(map.zoom);
 
-    return Container(
+    return ColoredBox(
+      // ignore: deprecated_member_use_from_same_package
       color: widget.backgroundColor,
       child: Stack(
         children: [
diff --git a/lib/src/map/options.dart b/lib/src/map/options.dart
index de92f94ea..f6cc5ab2a 100644
--- a/lib/src/map/options.dart
+++ b/lib/src/map/options.dart
@@ -70,6 +70,8 @@ class MapOptions {
   final double? minZoom;
   final double? maxZoom;
 
+  final Color backgroundColor;
+
   /// see [InteractiveFlag] for custom settings
   final int? _interactiveFlags;
 
@@ -212,6 +214,7 @@ class MapOptions {
     double? scrollWheelVelocity,
     this.minZoom,
     this.maxZoom,
+    this.backgroundColor = const Color(0xFFE0E0E0),
     this.onTap,
     this.onSecondaryTap,
     this.onLongPress,
diff --git a/lib/src/map/widget.dart b/lib/src/map/widget.dart
index c9f27dd45..2a8430e24 100644
--- a/lib/src/map/widget.dart
+++ b/lib/src/map/widget.dart
@@ -101,6 +101,9 @@ class FlutterMapStateContainer extends State<FlutterMap> {
             child: ClipRect(
               child: Stack(
                 children: [
+                  Positioned.fill(
+                    child: ColoredBox(color: options.backgroundColor),
+                  ),
                   OverflowBox(
                     minWidth: camera.size.x,
                     maxWidth: camera.size.x,