Extract background image URLs properties

Extract image properties to their own element in an attempt to fix
Safari issues.

See gh-38

Author: philwebb

src/main/css/asciidoctor.css

@@ -36,7 +36,8 @@
 /* Doc background embellishment */
 
 #doc {
-  background: url("../img/doc-background.svg") no-repeat top right / 305px 147px;
+  background: no-repeat top right / 305px 147px;
+  background-image: url("../img/doc-background.svg");
 }
 
 .doc #header {
@@ -91,7 +92,7 @@
 }
 
 .doc h2 {
-  font-size: 2.0em;
+  font-size: 2em;
 }
 
 .doc h3 {
@@ -925,18 +926,18 @@ i.fa.icon-warning {
 /* Responsive and Dark Theme Overrides */
 
 html.dark-theme #doc {
-  background: url("../img/doc-background-dark.svg") no-repeat top right / 305px
-    147px;
+  background: no-repeat top right / 305px 147px;
+  background-image: url("../img/doc-background-dark.svg");
 }
 
 @media screen and (max-width: 1024px) {
   #doc {
-    background: url("../img/doc-background.svg") no-repeat top right / 203px
-      95px;
+    background: no-repeat top right / 203px 95px;
+    background-image: url("../img/doc-background.svg");
   }
   html.dark-theme #doc {
-    background: url("../img/doc-background-dark.svg") no-repeat top right /
-      203px 95px;
+    background: no-repeat top right / 203px 95px;
+    background-image: url("../img/doc-background-dark.svg");
   }
 }
 

src/main/css/layout.css

@@ -22,9 +22,9 @@
 
 #banner {
   height: 100%;
-  background: url("../img/banner-logo.svg") no-repeat top
-    var(--layout-banner-logo-offset) left var(--layout-banner-logo-offset) /
-    auto var(--layout-banner-logo-height);
+  background: no-repeat top var(--layout-banner-logo-offset) left
+    var(--layout-banner-logo-offset) / auto var(--layout-banner-logo-height);
+  background-image: url("../img/banner-logo.svg");
 }
 
 #doc {

src/main/css/toc.css

@@ -101,8 +101,8 @@ body.fixed-toc #toc {
 #back-to-index a::before {
   content: "";
   filter: var(--toc-back-to-index-filter);
-  background: url("../img/octicons-16.svg#view-chevron-left") no-repeat center /
-    16px 16px;
+  background: no-repeat center / 16px 16px;
+  background-image: url("../img/octicons-16.svg#view-chevron-left");
   display: block;
   position: absolute;
   min-width: 16px;