diff --git a/components/layout_2020/display_list.rs b/components/layout_2020/display_list.rs
index add3c8ae05f..19661f1c8f6 100644
--- a/components/layout_2020/display_list.rs
+++ b/components/layout_2020/display_list.rs
@@ -411,11 +411,19 @@ impl<'a> BuilderForBoxFragment<'a> {
 
         // FIXME: background-repeat
         let tile_spacing = units::LayoutSize::zero();
-
         let tile_stride = tile_size + tile_spacing;
 
-        // FIXME: background-position
-        let positioned_tile_origin = positioning_area.origin;
+        // https://drafts.csswg.org/css-backgrounds/#background-position
+        let position_percentages = positioning_area.size - tile_size;
+        let positioned_tile_origin = positioning_area.origin +
+            units::LayoutSize::new(
+                get_cyclic(&b.background_position_x.0, index)
+                    .percentage_relative_to(Length::new(position_percentages.width))
+                    .px(),
+                get_cyclic(&b.background_position_y.0, index)
+                    .percentage_relative_to(Length::new(position_percentages.height))
+                    .px(),
+            );
 
         let offset = positioned_tile_origin - clipping_area.origin;
         let first_tile_origin = positioned_tile_origin -
diff --git a/components/style/properties/longhands/background.mako.rs b/components/style/properties/longhands/background.mako.rs
index cc8d6c0f34c..0c1683728c2 100644
--- a/components/style/properties/longhands/background.mako.rs
+++ b/components/style/properties/longhands/background.mako.rs
@@ -35,7 +35,7 @@ ${helpers.predefined_type(
     ${helpers.predefined_type(
         "background-position-" + axis,
         "position::" + direction + "Position",
-        engines="gecko servo-2013",
+        engines="gecko servo-2013 servo-2020",
         initial_value="computed::LengthPercentage::zero()",
         initial_specified_value="SpecifiedValue::initial_specified_value()",
         spec="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-" + axis,
diff --git a/components/style/properties/shorthands/background.mako.rs b/components/style/properties/shorthands/background.mako.rs
index 124d4fe406c..e7120a81635 100644
--- a/components/style/properties/shorthands/background.mako.rs
+++ b/components/style/properties/shorthands/background.mako.rs
@@ -217,7 +217,7 @@
 </%helpers:shorthand>
 
 <%helpers:shorthand name="background-position"
-                    engines="gecko servo-2013"
+                    engines="gecko servo-2013 servo-2020"
                     flags="SHORTHAND_IN_GETCS"
                     sub_properties="background-position-x background-position-y"
                     spec="https://drafts.csswg.org/css-backgrounds-4/#the-background-position">