diff --git a/config/schema/bootstrap_styles.schema.yml b/config/schema/bootstrap_styles.schema.yml
index f170dda95844527e7da42d0931c9b7f98f951e1c..5f6fe60d02f65e7859e032632bc4881df4849650 100644
--- a/config/schema/bootstrap_styles.schema.yml
+++ b/config/schema/bootstrap_styles.schema.yml
@@ -203,16 +203,16 @@ bootstrap_styles.container_wrapper:
           type: mapping
           label: 'Image'
           mapping:
-            media_id:
-              type: string
-              label: 'Media ID'
+            media_uuid:
+              type: uuid
+              label: 'Media UUID'
         video:
           type: mapping
           label: 'Video'
           mapping:
-            media_id:
-              type: string
-              label: 'Media ID'
+            media_uuid:
+              type: uuid
+              label: 'Media UUID'
         background_options:
           type: mapping
           label: 'Background Options'
diff --git a/src/Plugin/BootstrapStyles/Style/BackgroundMedia.php b/src/Plugin/BootstrapStyles/Style/BackgroundMedia.php
index e0ac58f550598b3dc5e41a13bb6eda01be595508..f1383b912e6b225f12965cf348d2818e26d426f1 100644
--- a/src/Plugin/BootstrapStyles/Style/BackgroundMedia.php
+++ b/src/Plugin/BootstrapStyles/Style/BackgroundMedia.php
@@ -3,6 +3,7 @@
 namespace Drupal\bootstrap_styles\Plugin\BootstrapStyles\Style;
 
 use Drupal\bootstrap_styles\Style\StylePluginBase;
+use Drupal\Core\Entity\EntityInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Entity\EntityTypeBundleInfoInterface;
 use Symfony\Component\DependencyInjection\ContainerInterface;
@@ -42,6 +43,13 @@ class BackgroundMedia extends StylePluginBase implements ContainerFactoryPluginI
    */
   protected $entityTypeManager;
 
+  /**
+   * The entity repository.
+   *
+   * @var \Drupal\Core\Entity\EntityRepositoryInterface
+   */
+  protected $entityRepository;
+
   /**
    * Constructs a BackgroundMedia object.
    *
@@ -68,7 +76,7 @@ class BackgroundMedia extends StylePluginBase implements ContainerFactoryPluginI
    * {@inheritdoc}
    */
   public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
-    return new static(
+    $instance = new static(
       $configuration,
       $plugin_id,
       $plugin_definition,
@@ -76,6 +84,8 @@ class BackgroundMedia extends StylePluginBase implements ContainerFactoryPluginI
       $container->get('entity_type.bundle.info'),
       $container->get('entity_type.manager')
     );
+    $instance->entityRepository = $container->get('entity.repository');
+    return $instance;
   }
 
   /**
@@ -235,12 +245,21 @@ class BackgroundMedia extends StylePluginBase implements ContainerFactoryPluginI
     $config = $this->config();
     // Check if the bundle exist.
     if ($config->get('background_image.bundle') && $this->entityTypeManager->getStorage('media_type')->load($config->get('background_image.bundle'))) {
+      // @todo: This is a backward compatibility layer. Remove at one point.
+      if (isset($storage['background_media']['image']['media_id'])) {
+        $storage['background_media']['image']['media_uuid'] = $this->entityTypeManager->getStorage('media')->load($storage['background_media']['image']['media_id'])?->uuid();
+      }
+      $media_id = NULL;
+      if (isset($storage['background_media']['image']['media_uuid'])) {
+        $media_id = $this->entityRepository->loadEntityByUuid('media',
+          $storage['background_media']['image']['media_uuid'])?->id();
+      }
       $form['background_image'] = [
         '#type' => 'media_library',
         '#title' => $this->t('Background image'),
         '#description' => $this->t('Background image'),
         '#allowed_bundles' => [$config->get('background_image.bundle')],
-        '#default_value' => $storage['background_media']['image']['media_id'] ?? NULL,
+        '#default_value' => $media_id,
         '#states' => [
           'visible' => [
             ':input.bs_background--type' => ['value' => 'image'],
@@ -250,12 +269,21 @@ class BackgroundMedia extends StylePluginBase implements ContainerFactoryPluginI
     }
     // Check if the bundle exist.
     if ($config->get('background_local_video.bundle') && $this->entityTypeManager->getStorage('media_type')->load($config->get('background_local_video.bundle'))) {
+      // @todo: This is a backward compatibility layer. Remove at one point.
+      if (isset($storage['background_media']['video']['media_id'])) {
+        $storage['background_media']['video']['media_uuid'] = $this->entityTypeManager->getStorage('media')->load($storage['background_media']['video']['media_id'])?->uuid();
+      }
+      $media_id = NULL;
+      if (isset($storage['background_media']['video']['media_uuid'])) {
+        $media_id = $this->entityRepository->loadEntityByUuid('media',
+          $storage['background_media']['video']['media_id'])?->id();
+      }
       $form['background_video'] = [
         '#type' => 'media_library',
         '#title' => $this->t('Background video'),
         '#description' => $this->t('Background video'),
         '#allowed_bundles' => [$config->get('background_local_video.bundle')],
-        '#default_value' => $storage['background_media']['video']['media_id'] ?? NULL,
+        '#default_value' => $media_id,
         '#states' => [
           'visible' => [
             ':input.bs_background--type' => ['value' => 'video'],
@@ -379,6 +407,14 @@ class BackgroundMedia extends StylePluginBase implements ContainerFactoryPluginI
       $storage['background_media'][$background_type]['media_id'] = $media_id;
     }
 
+    // Backward compatibility for layouts created before transition to uuid.
+    foreach (['image', 'video'] as $background_type) {
+      if (isset($storage['background_media'][$background_type]['media_uuid'])) {
+        $media_id = $this->entityRepository->loadEntityByUuid('media', $storage['background_media'][$background_type]['media_uuid'])?->id();
+        $storage['background_media'][$background_type]['media_id'] = $media_id;
+      }
+    }
+
     if (isset($storage['background']['background_type'])) {
       if ($config->get('background_image.bundle') && $storage['background']['background_type'] == 'image' && isset($storage['background_media']['image']['media_id']) && ($media_id = $storage['background_media']['image']['media_id'])) {
         $media_entity = Media::load($media_id);