diff --git a/assets/components/organisms/hero/hero.scss b/assets/components/organisms/hero/hero.scss
index cec6ba1a..22fa16a6 100644
--- a/assets/components/organisms/hero/hero.scss
+++ b/assets/components/organisms/hero/hero.scss
@@ -75,6 +75,14 @@
     height: 100%;
   }
 
+  img.top-center {
+    object-position: top center;
+  }
+
+  img.bottom-center {
+    object-position: bottom center;
+  }
+
   @include media-breakpoint-up(xxl) {
     picture {
       height: 80vh;
diff --git a/assets/components/organisms/hero/hero.yml b/assets/components/organisms/hero/hero.yml
index fe3f52a6..9ce23d32 100644
--- a/assets/components/organisms/hero/hero.yml
+++ b/assets/components/organisms/hero/hero.yml
@@ -3,6 +3,8 @@ title: Hero
 notes: |
   The hero component is used as intro to basic pages.
 
+  You can add the `.top-center` class to the `<img>` tag if you want the background picture to be centred from the top of the image, or the `bottom-center` class to the `<img>` tag if you want the background picture to be centred from the bottom of the image.
+
 variants:
   - name: legend
     title: Hero with image legend