diff --git a/app/assets/images/herotest.png b/app/assets/images/herotest.png
new file mode 100644
index 0000000000..65ad7c0575
Binary files /dev/null and b/app/assets/images/herotest.png differ
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 1e2c4d1a5d..9cb38c2315 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -61,3 +61,93 @@ $govuk-include-default-font-face: false;
 .bank-hols .govuk-panel {
   margin-bottom: govuk-spacing(6);
 }
+
+.herotest {
+  position: relative;
+  background:  govuk-colour("mid-grey");
+  margin-bottom: 300px;
+}
+
+.herotest-image {
+  display: block;
+  max-width: 100%;
+}
+
+.herotest-text-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.herotest-text-box {
+  width: calc(100% / 2);
+  margin-top: govuk-spacing(4);
+  padding: govuk-spacing(4);
+  background: govuk-colour("light-grey");
+  border: solid 1px $govuk-border-colour;
+}
+
+.herotest--limited-width {
+  background:  govuk-colour("mid-grey");
+
+  .herotest-image {
+    width: 1573px;
+    margin: 0 auto;
+  }
+}
+
+.herotest--fixed-height {
+  .herotest-wrapper {
+    display: flex;
+    justify-content: center;
+    height: 500px;
+    overflow: hidden;
+  }
+
+  .herotest-image {
+    height: 100%;
+    max-width: none;
+  }
+}
+
+.herotest--true-full-fixed-height {
+  .herotest-wrapper {
+    position: relative;
+    height: 500px;
+    overflow: hidden;
+  }
+
+  .herotest-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+}
+
+.herotest--image-fade {
+  .herotest-additional-wrapper {
+    position: relative;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 150px;
+    }
+
+    &::before {
+      left: 0;
+      background: linear-gradient(90deg, rgba(177,180,182,1) 0%, rgba(2,0,36,0) 100%);
+    }
+
+    &::after {
+      right: 0;
+      background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(177,180,182,1) 100%);
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/controllers/full_width_images_controller.rb b/app/controllers/full_width_images_controller.rb
new file mode 100644
index 0000000000..e44d69a425
--- /dev/null
+++ b/app/controllers/full_width_images_controller.rb
@@ -0,0 +1,7 @@
+class FullWidthImagesController < ApplicationController
+  slimmer_template "gem_layout_full_width"
+
+  include Cacheable
+
+  def index; end
+end
diff --git a/app/views/full_width_images/index.html.erb b/app/views/full_width_images/index.html.erb
new file mode 100644
index 0000000000..2b54359066
--- /dev/null
+++ b/app/views/full_width_images/index.html.erb
@@ -0,0 +1,115 @@
+<% content_for :title, "Full width images - GOV.UK" %>
+
+<main id="content" role="main">
+  <div class="herotest herotest--full-width">
+    <div class="herotest-wrapper">
+      <%= image_tag 'herotest.png', class: 'herotest-image', alt: '' %>
+    </div>
+
+    <div class="herotest-text-wrapper">
+      <div class="govuk-width-container">
+        <div class="herotest-text-box">
+          <h1 class="govuk-heading-m">True full width</h1>
+          <p class="govuk-body">This image is true full width. It will always be the full width of the browser window.</p>
+          <ul class="govuk-list govuk-list--bullet">
+            <li>Good: true full width image</li>
+            <li>Bad: no control over image height, so this box could overlap onto content below on smaller screens</li>
+            <li>Bad: position of content in the image varies, so this box could obscure people's faces</li>
+            <li>Bad: image height scales with browser size, so for large screens maybe no page content is seen on page load, only image</li>
+            <li>Bad: to make the image look good, needs a very large filesize</li>
+            <li>Bad: breaks page layout before image has loaded, or if it fails to load</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="herotest herotest--limited-width">
+    <div class="herotest-wrapper">
+      <%= image_tag 'herotest.png', class: 'herotest-image', alt: '' %>
+    </div>
+
+    <div class="herotest-text-wrapper">
+      <div class="govuk-width-container">
+        <div class="herotest-text-box">
+          <h1 class="govuk-heading-m">Full width up to a limit</h1>
+          <p class="govuk-body">This image is wide but limited (to 1200px), after which a gap will appear either side of the image.</p>
+          <ul class="govuk-list govuk-list--bullet">
+            <li>Good: height of image doesn't change</li>
+            <li>Good: position of content within image much more static</li>
+            <li>Bad: gap either side of the image for some users (a background colour can improve this as shown, particularly if the colour is similar to the image)</li>
+            <li>Bad: some control over image height, but this box could still overlap onto content below on smaller screens</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="herotest herotest--fixed-height">
+    <div class="herotest-wrapper">
+      <%= image_tag 'herotest.png', class: 'herotest-image', alt: '' %>
+    </div>
+
+    <div class="herotest-text-wrapper">
+      <div class="govuk-width-container">
+        <div class="herotest-text-box">
+          <h1 class="govuk-heading-m">Full width with fixed height (chosen option)</h1>
+          <p class="govuk-body"></p>
+          <ul class="govuk-list govuk-list--bullet">
+            <li>Good: height is fixed</li>
+            <li>Good: position of content is known</li>
+            <li>Bad: won't be full width on largest screens</li>
+            <li>Bad: image content is lost either side as browser gets narrower</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="herotest herotest--true-full-fixed-height">
+    <div class="herotest-wrapper">
+      <%= image_tag 'herotest.png', class: 'herotest-image', alt: '' %>
+    </div>
+
+    <div class="herotest-text-wrapper">
+      <div class="govuk-width-container">
+        <div class="herotest-text-box">
+          <h1 class="govuk-heading-m">True full width with fixed height</h1>
+          <p class="govuk-body"></p>
+          <ul class="govuk-list govuk-list--bullet">
+            <li>Good: true full width</li>
+            <li>Good: image content is mostly predictable</li>
+            <li>Bad: bottom of image is lost on larger screens</li>
+            <li>Bad: image leaves a gap underneath on smaller screens</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="herotest herotest--fixed-height herotest--image-fade">
+    <div class="herotest-wrapper">
+      <div class="herotest-additional-wrapper">
+        <%= image_tag 'herotest.png', class: 'herotest-image', alt: '' %>
+      </div>
+    </div>
+
+    <div class="herotest-text-wrapper">
+      <div class="govuk-width-container">
+        <div class="herotest-text-box">
+          <h1 class="govuk-heading-m">Full width, fixed height, fade out</h1>
+          <p class="govuk-body"></p>
+          <ul class="govuk-list govuk-list--bullet">
+            <li>Good: height is fixed</li>
+            <li>Good: position of content is known</li>
+            <li>Good: fade out helps reduce jarring edge of image on large screens</li>
+            <li>Bad: won't be full width on largest screens</li>
+            <li>Bad: image content is lost either side as browser gets narrower</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</main>
diff --git a/config/routes.rb b/config/routes.rb
index 38344997fb..1b06eff22e 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -34,6 +34,8 @@
     get "/*any", to: "landing_page#show"
   end
 
+  get "/full-width-images" => "full_width_images#index"
+
   # Accounts
   get "/sign-in", to: "help#sign_in"
   get "/sign-in/redirect", to: "sessions#create"