diff --git a/bootstrap_styles.libraries.yml b/bootstrap_styles.libraries.yml
index 9cb08b5..9457c66 100644
--- a/bootstrap_styles.libraries.yml
+++ b/bootstrap_styles.libraries.yml
@@ -3,6 +3,7 @@ layout_builder_form_style:
   css:
     theme:
       css/general-styles.css: { }
+      css/general-styles-bg-image.css: { }
   js:
     js/components/tabs.js: { }
     js/components/inputs.js: { }
@@ -96,6 +97,14 @@ plugin.background_media.build:
   js:
     js/plugins/background_media/build.js: { }
 
+# background_media_image
+plugin.background_media_image.build:
+  css:
+    theme:
+      css/build/plugins/background-media-image.css: { }
+  js:
+    js/plugins/background_media_image/build.js: { }
+
 # text_color
 plugin.text_color.layout_builder_form:
   css:
diff --git a/bootstrap_styles.module b/bootstrap_styles.module
index 60febe1..1f538c5 100644
--- a/bootstrap_styles.module
+++ b/bootstrap_styles.module
@@ -30,6 +30,13 @@ function bootstrap_styles_theme($existing, $type, $theme, $path) {
       'base hook' => 'radios',
       'path' => $path . '/templates/form',
     ],
+    'bs_image_background' => [
+      'variables' => [
+        'image_responsive' => '',
+        'attributes' => [],
+        'children' => [],
+      ],
+    ],
     'bs_video_background' => [
       'variables' => [
         'video_background_url' => '',
diff --git a/config/install/image.style.full_screen_lg.yml b/config/install/image.style.full_screen_lg.yml
new file mode 100644
index 0000000..d8fe5dd
--- /dev/null
+++ b/config/install/image.style.full_screen_lg.yml
@@ -0,0 +1,14 @@
+langcode: en
+status: true
+dependencies: {  }
+name: full_screen_lg
+label: 'Full screen lg'
+effects:
+  e9f19b10-66a6-4bf9-886c-4c3247658568:
+    uuid: e9f19b10-66a6-4bf9-886c-4c3247658568
+    id: image_scale
+    weight: 1
+    data:
+      width: 1199
+      height: null
+      upscale: false
diff --git a/config/install/image.style.full_screen_md.yml b/config/install/image.style.full_screen_md.yml
new file mode 100644
index 0000000..b7b79dd
--- /dev/null
+++ b/config/install/image.style.full_screen_md.yml
@@ -0,0 +1,14 @@
+langcode: en
+status: true
+dependencies: {  }
+name: full_screen_md
+label: 'Full screen md'
+effects:
+  2094d970-581b-424c-abba-cf832fed085f:
+    uuid: 2094d970-581b-424c-abba-cf832fed085f
+    id: image_scale
+    weight: 1
+    data:
+      width: 991
+      height: null
+      upscale: false
diff --git a/config/install/image.style.full_screen_sm.yml b/config/install/image.style.full_screen_sm.yml
new file mode 100644
index 0000000..86ad885
--- /dev/null
+++ b/config/install/image.style.full_screen_sm.yml
@@ -0,0 +1,14 @@
+langcode: en
+status: true
+dependencies: {  }
+name: full_screen_sm
+label: 'Full screen sm'
+effects:
+  15a1349a-cd9f-47f1-8411-4c878914befe:
+    uuid: 15a1349a-cd9f-47f1-8411-4c878914befe
+    id: image_scale
+    weight: 1
+    data:
+      width: 767
+      height: null
+      upscale: false
diff --git a/config/install/image.style.full_screen_xl.yml b/config/install/image.style.full_screen_xl.yml
new file mode 100644
index 0000000..1374a5d
--- /dev/null
+++ b/config/install/image.style.full_screen_xl.yml
@@ -0,0 +1,14 @@
+langcode: en
+status: true
+dependencies: {  }
+name: full_screen_xl
+label: 'Full screen xl'
+effects:
+  82fe13ec-609d-491e-b05f-cc2b52dc8d7b:
+    uuid: 82fe13ec-609d-491e-b05f-cc2b52dc8d7b
+    id: image_scale
+    weight: 1
+    data:
+      width: 1399
+      height: null
+      upscale: false
diff --git a/config/install/image.style.full_screen_xs.yml b/config/install/image.style.full_screen_xs.yml
new file mode 100644
index 0000000..8688ff3
--- /dev/null
+++ b/config/install/image.style.full_screen_xs.yml
@@ -0,0 +1,14 @@
+langcode: en
+status: true
+dependencies: {  }
+name: full_screen_xs
+label: 'Full screen xs'
+effects:
+  231cce02-2b3a-44fb-8bd5-e57da1c1802d:
+    uuid: 231cce02-2b3a-44fb-8bd5-e57da1c1802d
+    id: image_scale
+    weight: 1
+    data:
+      width: 575
+      height: null
+      upscale: false
diff --git a/config/install/image.style.full_screen_xxl.yml b/config/install/image.style.full_screen_xxl.yml
new file mode 100644
index 0000000..6dec6df
--- /dev/null
+++ b/config/install/image.style.full_screen_xxl.yml
@@ -0,0 +1,14 @@
+langcode: en
+status: true
+dependencies: {  }
+name: full_screen_xxl
+label: 'Full screen xxl'
+effects:
+  99bbd6a8-02a6-4263-8832-476675cb5f6c:
+    uuid: 99bbd6a8-02a6-4263-8832-476675cb5f6c
+    id: image_scale
+    weight: 1
+    data:
+      width: 1920
+      height: null
+      upscale: false
diff --git a/config/install/responsive_image.styles.full_screen.yml b/config/install/responsive_image.styles.full_screen.yml
new file mode 100644
index 0000000..ba37c2d
--- /dev/null
+++ b/config/install/responsive_image.styles.full_screen.yml
@@ -0,0 +1,47 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.full_screen_lg
+    - image.style.full_screen_md
+    - image.style.full_screen_sm
+    - image.style.full_screen_xl
+    - image.style.full_screen_xs
+    - image.style.full_screen_xxl
+  theme:
+    - theme
+id: full_screen
+label: 'Full screen'
+image_style_mappings:
+  -
+    image_mapping_type: image_style
+    image_mapping: full_screen_xxl
+    breakpoint_id: theme.xxl
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: full_screen_xl
+    breakpoint_id: theme.xl
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: full_screen_lg
+    breakpoint_id: theme.lg
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: full_screen_md
+    breakpoint_id: theme.md
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: full_screen_sm
+    breakpoint_id: theme.sm
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: full_screen_xs
+    breakpoint_id: theme.xs
+    multiplier: 1x
+breakpoint_group: theme
+fallback_image_style: full_screen_xs
diff --git a/css/build/plugins/background-media-image.css b/css/build/plugins/background-media-image.css
new file mode 100644
index 0000000..46fefe4
--- /dev/null
+++ b/css/build/plugins/background-media-image.css
@@ -0,0 +1,60 @@
+.bg-image-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+.bg-image-wrapper > picture img {
+  position: absolute;
+  width: 100%;
+  height: 100% !important;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
+
+.bg-image--object-position--center > picture img {
+  object-position: center;
+}
+.bg-image--object-position--left-top > picture img {
+  object-position: left top;
+}
+
+.bg-image--object-position--center-top > picture img {
+  object-position: center top;
+}
+
+.bg-image--object-position--right-top > picture img {
+  object-position: right top;
+}
+
+.bg-image--object-position--left-center > picture img {
+  object-position: left center;
+}
+
+.bg-image--object-position--right-center > picture img {
+  object-position: right center;
+}
+
+.bg-image--object-position--left-bottom > picture img {
+  object-position: left bottom;
+}
+
+.bg-image--object-position--center-bottom > picture img {
+  object-position: center bottom;
+}
+
+.bg-image--object-position--right-bottom > picture img {
+  object-position: right bottom;
+}
+
+.bg-image--object-fit--cover > picture img {
+  object-fit: cover;
+}
+
+.bg-image--object-fit--contain > picture img {
+  object-fit: contain;
+}
+
+.bg-image--object-fit--auto > picture img {
+  object-fit: fill;
+}
diff --git a/css/general-styles-bg-image.css b/css/general-styles-bg-image.css
new file mode 100644
index 0000000..af8e652
--- /dev/null
+++ b/css/general-styles-bg-image.css
@@ -0,0 +1,5 @@
+.layout-builder-configure-section .bs_background--options .bs_background--repeat,
+.layout-builder-configure-section .bs_background--options .bs_background--attachment,
+.layout-builder-configure-section .bs_background--options .bs_background--attachment + hr {
+  display: none !important;
+}
diff --git a/js/plugins/background_media_image/build.js b/js/plugins/background_media_image/build.js
new file mode 100644
index 0000000..3a4ce33
--- /dev/null
+++ b/js/plugins/background_media_image/build.js
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Behaviors of Boostrap Layout Builder local video background.
+ */
+
+(function ($, _, Drupal, drupalSettings) {
+  "use strict";
+
+  Drupal.behaviors.backgroundMediaBuildImage = {
+    attach: function (context, settings) {
+      // Set the height of the background video.
+      $('.bg-image-wrapper').each(function() {
+        $(this).height(function() {
+          return $(this).find('.bg-image-content > div').outerHeight();
+        });
+      });
+    }
+  }
+
+})(window.jQuery, window._, window.Drupal, window.drupalSettings);
diff --git a/src/Element/ImageBackground.php b/src/Element/ImageBackground.php
new file mode 100644
index 0000000..61ef85d
--- /dev/null
+++ b/src/Element/ImageBackground.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace Drupal\bootstrap_styles\Element;
+
+use Drupal\Core\Render\Element\RenderElementBase;
+
+/**
+ * Provides a image background render element.
+ *
+ * @RenderElementBase("bs_image_background")
+ */
+class ImageBackground extends RenderElementBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getInfo() {
+    return [
+      '#theme' => 'bs_image_background',
+      '#attributes' => [],
+      '#image_responsive' => '',
+      '#children' => [],
+    ];
+  }
+
+}
diff --git a/src/Plugin/BootstrapStyles/Style/BackgroundMedia.php b/src/Plugin/BootstrapStyles/Style/BackgroundMedia.php
index 174a13b..e3301c9 100644
--- a/src/Plugin/BootstrapStyles/Style/BackgroundMedia.php
+++ b/src/Plugin/BootstrapStyles/Style/BackgroundMedia.php
@@ -393,14 +393,24 @@ class BackgroundMedia extends StylePluginBase implements ContainerFactoryPluginI
 
         // Check if the field exist.
         if ($media_entity && $media_entity->hasField($media_field_name)) {
-          $background_image_style = $this->buildBackgroundMediaImage($media_entity, $media_field_name, $storage);
+          $media_field = $media_entity->get($media_field_name)->entity;
+          $media_uri = $media_field->get('uri')->value;
+
+          $build['#theme_wrappers']['bs_image_background'] = [
+            '#image_responsive' => [
+              '#theme' => 'responsive_image',
+              '#responsive_image_style_id' => 'full_screen',
+              '#uri' => $media_uri,
+            ],
+            '#attributes' => [
+              'class' => $this->buildBackgroundMediaImageClasses($storage),
+            ],
+          ];
           // Assign the style to element or its theme wrapper if exist.
           if ($theme_wrapper && isset($build['#theme_wrappers'][$theme_wrapper])) {
-            $build['#theme_wrappers'][$theme_wrapper]['#attributes']['style'][] = $background_image_style;
             $build['#theme_wrappers'][$theme_wrapper]['#attributes']['class'][] = 'bg-image';
           }
           else {
-            $build['#attributes']['style'][] = $background_image_style;
             $build['#attributes']['class'][] = 'bg-image';
           }
         }
@@ -449,6 +459,31 @@ class BackgroundMedia extends StylePluginBase implements ContainerFactoryPluginI
     return $build;
   }
 
+  /**
+   * Helper function to the background media image classes.
+   *
+   * @param object $storage
+   *   The styles storage.
+   * @return array
+   *   Array of classes
+   */
+  public function buildBackgroundMediaImageClasses($storage) {
+    // object-position object-fit
+    $classes = [];
+    if (isset($storage['background_media']['background_options'])) {
+      // Background position.
+      if (isset($storage['background_media']['background_options']['background_position']) && !empty($storage['background_media']['background_options']['background_position'])) {
+        $classes[] = 'bg-image--object-position--' . str_replace(' ', '-', $storage['background_media']['background_options']['background_position']);
+      }
+
+      // Background size.
+      if (isset($storage['background_media']['background_options']['background_size']) && !empty($storage['background_media']['background_options']['background_size'])) {
+        $classes[] = 'bg-image--object-fit--' . str_replace(' ', '-', $storage['background_media']['background_options']['background_size']);
+      }
+    }
+    return $classes;
+  }
+
   /**
    * Helper function to the background media image style.
    *
diff --git a/templates/bs-image-background.html.twig b/templates/bs-image-background.html.twig
new file mode 100644
index 0000000..b97724b
--- /dev/null
+++ b/templates/bs-image-background.html.twig
@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a container used to wrap child elements.
+ *
+ * Used for grouped form items. Can also be used as a theme wrapper for any
+ * renderable element, to surround it with a <div> and HTML attributes.
+ * See \Drupal\Core\Render\Element\RenderElement for more
+ * information on the #theme_wrappers render array property, and
+ * \Drupal\Core\Render\Element\container for usage of the container render
+ * element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ * - has_parent: A flag to indicate that the container has one or more parent containers.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'bg-image-wrapper'
+  ]
+%}
+
+{{ attach_library('bootstrap_styles/plugin.background_media_image.build') }}
+
+<div{{ attributes.addClass(classes) }}>
+  {{ image_responsive }}
+
+  <div class="bg-image-content">
+    {{ children }}
+  </div>
+</div>