diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 8737844e3..3e80fd2b3 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -615,6 +615,18 @@ button,
   appearance: none;
 }
 
+.bg-fixed {
+  background-attachment: fixed;
+}
+
+.bg-local {
+  background-attachment: local;
+}
+
+.bg-scroll {
+  background-attachment: scroll;
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -4458,6 +4470,18 @@ button,
     appearance: none;
   }
 
+  .sm\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .sm\:bg-local {
+    background-attachment: local;
+  }
+
+  .sm\:bg-scroll {
+    background-attachment: scroll;
+  }
+
   .sm\:bg-transparent {
     background-color: transparent;
   }
@@ -8302,6 +8326,18 @@ button,
     appearance: none;
   }
 
+  .md\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .md\:bg-local {
+    background-attachment: local;
+  }
+
+  .md\:bg-scroll {
+    background-attachment: scroll;
+  }
+
   .md\:bg-transparent {
     background-color: transparent;
   }
@@ -12146,6 +12182,18 @@ button,
     appearance: none;
   }
 
+  .lg\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .lg\:bg-local {
+    background-attachment: local;
+  }
+
+  .lg\:bg-scroll {
+    background-attachment: scroll;
+  }
+
   .lg\:bg-transparent {
     background-color: transparent;
   }
@@ -15990,6 +16038,18 @@ button,
     appearance: none;
   }
 
+  .xl\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .xl\:bg-local {
+    background-attachment: local;
+  }
+
+  .xl\:bg-scroll {
+    background-attachment: scroll;
+  }
+
   .xl\:bg-transparent {
     background-color: transparent;
   }
diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index a6df15958..35500de94 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -773,6 +773,7 @@ module.exports = {
 
   modules: {
     appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
     backgroundColors: ['responsive', 'hover'],
     backgroundPosition: ['responsive'],
     backgroundSize: ['responsive'],
diff --git a/docs/navigation.php b/docs/navigation.php
index db5b7db7c..cfd047400 100644
--- a/docs/navigation.php
+++ b/docs/navigation.php
@@ -18,6 +18,7 @@ return [
             'Color' => 'background-color',
             'Position' => 'background-position',
             'Size' => 'background-size',
+            'Attachment' => 'background-attachment',
         ],
         'Borders' => [
             'Width' => 'border-width',
diff --git a/docs/source/docs/background-attachment.blade.md b/docs/source/docs/background-attachment.blade.md
new file mode 100644
index 000000000..42ac796ae
--- /dev/null
+++ b/docs/source/docs/background-attachment.blade.md
@@ -0,0 +1,32 @@
+---
+extends: _layouts.documentation
+title: "Background Attachment"
+description: "Utilities for controlling how a background image behaves when scrolling."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
+---
+
+@include('_partials.work-in-progress')
+
+@include('_partials.class-table', [
+  'rows' => [
+    [
+      '.bg-fixed',
+      'background-attachment: fixed;',
+      'Fix the background image relative to the viewport.',
+    ],
+    [
+      '.bg-local',
+      'background-attachment: local;',
+      'Scroll the background image with the container and the viewport.',
+    ],
+    [
+      '.bg-scroll',
+      'background-attachment: scroll;',
+      'Scroll the background image with the viewport but not with the container.',
+    ],
+  ]
+])
diff --git a/src/generators/backgroundAttachment.js b/src/generators/backgroundAttachment.js
new file mode 100644
index 000000000..04e77c459
--- /dev/null
+++ b/src/generators/backgroundAttachment.js
@@ -0,0 +1,9 @@
+import defineClasses from '../util/defineClasses'
+
+export default function() {
+  return defineClasses({
+    'bg-fixed': { 'background-attachment': 'fixed' },
+    'bg-local': { 'background-attachment': 'local' },
+    'bg-scroll': { 'background-attachment': 'scroll' },
+  })
+}
diff --git a/src/utilityModules.js b/src/utilityModules.js
index d064d7d22..6c87524d6 100644
--- a/src/utilityModules.js
+++ b/src/utilityModules.js
@@ -1,5 +1,6 @@
 import lists from './generators/lists'
 import appearance from './generators/appearance'
+import backgroundAttachment from './generators/backgroundAttachment'
 import backgroundColors from './generators/backgroundColors'
 import backgroundPosition from './generators/backgroundPosition'
 import backgroundSize from './generators/backgroundSize'
@@ -43,6 +44,7 @@ import zIndex from './generators/zIndex'
 export default [
   { name: 'lists', generator: lists },
   { name: 'appearance', generator: appearance },
+  { name: 'backgroundAttachment', generator: backgroundAttachment },
   { name: 'backgroundColors', generator: backgroundColors },
   { name: 'backgroundPosition', generator: backgroundPosition },
   { name: 'backgroundSize', generator: backgroundSize },