diff --git a/src/wp-content/themes/twentyfourteen/images/pattern-dark.svg b/src/wp-content/themes/twentyfourteen/images/pattern-dark.svg
new file mode 100644
index 0000000000..21843645cf
--- /dev/null
+++ b/src/wp-content/themes/twentyfourteen/images/pattern-dark.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="5px" height="5px" viewBox="0 0 5 5" enable-background="new 0 0 5 5" xml:space="preserve">
+<g>
+	<polygon points="1,0 0,1 0,5 5,0 	"/>
+	<polygon points="5,5 5,1 1,5 	"/>
+</g>
+</svg>
diff --git a/src/wp-content/themes/twentyfourteen/images/pattern-light.svg b/src/wp-content/themes/twentyfourteen/images/pattern-light.svg
new file mode 100644
index 0000000000..7c4df536cb
--- /dev/null
+++ b/src/wp-content/themes/twentyfourteen/images/pattern-light.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="5px" height="5px" viewBox="0 0 5 5" enable-background="new 0 0 5 5" xml:space="preserve">
+<g>
+	<polygon fill="#FFFFFF" points="1,0 0,1 0,5 5,0 	"/>
+	<polygon fill="#FFFFFF" points="5,5 5,1 1,5 	"/>
+</g>
+</svg>
diff --git a/src/wp-content/themes/twentyfourteen/style.css b/src/wp-content/themes/twentyfourteen/style.css
index 337a59bd91..8082c31af5 100644
--- a/src/wp-content/themes/twentyfourteen/style.css
+++ b/src/wp-content/themes/twentyfourteen/style.css
@@ -1004,10 +1004,7 @@ span + .edit-link:before,
  */
 
  .featured-thumbnail {
-	background: #767676;
-	background-attachment: fixed;
-	background-image: -webkit-linear-gradient(135deg, #767676 12.5%, #fff 12.5%, #fff 50%, #767676 50%, #767676 62.5%, #fff 62.5%);
-	background-size: 4px 4px;
+	background: url(images/pattern-light.svg) #767676 repeat fixed;
 	display: none;
 	float: none;
 	height: auto;
@@ -1018,11 +1015,8 @@ span + .edit-link:before,
 	z-index: 0;
 }
 
-.featured-thumbnail:hover {
-	background: #919191;
-	background-attachment: fixed;
-	background-image: -webkit-linear-gradient(135deg, #919191 12.5%, #fff 12.5%, #fff 50%, #919191 50%, #919191 62.5%, #fff 62.5%);
-	background-size: 4px 4px;
+a.featured-thumbnail:hover {
+	background: url(images/pattern-light.svg) #919191 repeat fixed;
 }
 
 .featured-thumbnail img {
@@ -2467,11 +2461,7 @@ span + .edit-link:before,
  */
 
 .featured-content {
-	background: #000;
-	background-attachment: fixed;
-	background-image: -webkit-linear-gradient(135deg, #4d4d4d 12.5%, #000 12.5%, #000 50%, #4d4d4d 50%, #4d4d4d 62.5%, #000 62.5%);
-	background-image:         linear-gradient(135deg, #4d4d4d 12.5%, #000 12.5%, #000 50%, #4d4d4d 50%, #4d4d4d 62.5%, #000 62.5%);
-	background-size: 4px 4px;
+	background: url(images/pattern-dark.svg) #4d4d4d repeat fixed;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing:    border-box;
 	box-sizing:         border-box;