css: add background-color appropriate for background-image

To make sure there is no flickering while images are loading.
cwb96 · Aug 27, 2017 · 2c4dc80 · 2c4dc80
1 parent 471bf01
commit 2c4dc80
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 22 deletions.
diff --git a/themes/chronicles/static/css/add-on.css b/themes/chronicles/static/css/add-on.css
@@ -162,8 +162,8 @@ blockquote p {
         }
 
 .pagination .button {
-    /*background: white;*/
-	background-image: url(/img/main/cellpic1.jpg);
+    background-color: #620300;
+    background-image: url(/img/main/cellpic1.jpg);
 }
 
 /** Social Share Button CSS **/
@@ -337,8 +337,8 @@ body.is-share-visible #wrapper {
 		}
 
 .post {
-	
-	background-image: url(/img/main/gen_background.jpg);
+    background-color: #3f1902;
+    background-image: url(/img/main/gen_background.jpg);
     margin: 0 0 2em 0;
 }
 
@@ -371,8 +371,8 @@ ul.pagination li {
     }
 
 #back-to-top {
-	/*background-color: white;*/
-	background-image: url(/img/main/cellpic1.jpg);
+    background-color: #620300;
+    background-image: url(/img/main/cellpic1.jpg);
     bottom: 5px;
     color: #aaaaaa;
     display: none;
@@ -389,16 +389,8 @@ ul.pagination li {
     }
 
 
-
-#share-menu {
-	background-image: url(/img/main/gen_background.jpg);
-}
 
-.no-underline img{
-   text-decoration: none !important;
-   border:0px !important;
-   outline:none;
-   border-width: 0px;
-   outline-width:0px;
-   border-bottom: none;
+#share-menu {
+    background-color: #3f1902;
+    background-image: url(/img/main/gen_background.jpg);
 }
diff --git a/themes/chronicles/static/css/main.css b/themes/chronicles/static/css/main.css
@@ -1408,8 +1408,8 @@
 	}
 
 	body {
-    /*background: #f4f4f4;*/
-    background-image: url(/img/main/border_background.jpg);
+		background-color: #000;
+		background-image: url(/img/main/border_background.jpg);
 	}
 
 		body.is-loading *, body.is-loading *:before, body.is-loading *:after {
@@ -1709,7 +1709,7 @@
 		-webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
 		-ms-transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
 		transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
-/*		background-color: transparent;*/
+		background-color: #620300;
 		background-image: url(/img/main/cellpic1.jpg);
 		border: 0;
 		box-shadow: inset 0 0 0 1px rgba(160, 160, 160, 0.3);
@@ -2961,7 +2961,7 @@
 		-webkit-justify-content: space-between;
 		-ms-justify-content: space-between;
 		justify-content: space-between;
-		/*background-color: #ffffff;*/
+		background-color: #620300;
 		background-image: url(/img/main/cellpic1.jpg);
 		border-bottom: solid 1px rgba(160, 160, 160, 0.3);
 		height: 3.5em;
@@ -3157,6 +3157,7 @@
 /* Wrapper */
 
 	#wrapper {
+		background-color: #36281d;
 		background-image: url(/img/main/body_background.jpg);
 		display: -moz-flex;
 		display: -webkit-flex;
@@ -3357,7 +3358,7 @@
 		-ms-transition: -ms-transform 0.5s ease, visibility 0.5s;
 		transition: transform 0.5s ease, visibility 0.5s;
 		-webkit-overflow-scrolling: touch;
-		/*background: #ffffff;*/
+		background-color: #620300;
 		background-image: url(/img/main/cellpic1.jpg);
 		border-left: solid 1px rgba(160, 160, 160, 0.3);
 		box-shadow: none;