[gimp-web/header-image] Add extra css for non-js users to still see background img



commit 3636f23ac06bf679dcff4a1cb3ae94dc7d3dd593
Author: Pat David <patdavid gmail com>
Date:   Mon Jan 16 13:11:37 2017 -0600

    Add extra css for non-js users to still see background img
    
    This just adds a new stylesheet (called at the end of the page
    content) to include the default header image.  This way non-js
    users will still see a background image, but js users will get
    a random header image as expected.

 themes/newgimp/static/css/home-header.css |    3 +++
 themes/newgimp/static/css/home.css        |    1 +
 themes/newgimp/templates/home.html        |    3 ++-
 3 files changed, 6 insertions(+), 1 deletions(-)
---
diff --git a/themes/newgimp/static/css/home-header.css b/themes/newgimp/static/css/home-header.css
new file mode 100644
index 0000000..4f09b87
--- /dev/null
+++ b/themes/newgimp/static/css/home-header.css
@@ -0,0 +1,3 @@
+#banner {
+    background-image: linear-gradient(rgba(44,52,80,0.5), rgba(44,62,80,0.5)), 
url('/theme/images/Niagara_Rainbow.jpg');
+}
diff --git a/themes/newgimp/static/css/home.css b/themes/newgimp/static/css/home.css
index 2b746b7..a287465 100644
--- a/themes/newgimp/static/css/home.css
+++ b/themes/newgimp/static/css/home.css
@@ -15,6 +15,7 @@ p {
 #banner {
     min-height: 350px;
     background-image: linear-gradient(rgba(44,52,80,0.5), rgba(44,62,80,0.5));
+    /*background-image: linear-gradient(rgba(44,52,80,0.5), rgba(44,62,80,0.5)), 
url('/theme/images/Niagara_Rainbow.jpg'); */
     background-position: 0;
     background-size: cover;
     transition: opacity 0.5s ease;
diff --git a/themes/newgimp/templates/home.html b/themes/newgimp/templates/home.html
index e2cafde..5fbfacb 100644
--- a/themes/newgimp/templates/home.html
+++ b/themes/newgimp/templates/home.html
@@ -274,7 +274,8 @@
         
     </section>
 
-
+    <link rel='stylesheet' type='text/css' href="/theme/css/home-header.css" />
     <!-- <script async src='/images/headers.json'></script> -->
     <script async src='/js/rotateHeaderImg.js'></script>
+
 {% endblock content %}


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]