diff --git a/content/about/bg_new.jpg b/content/about/bg_new.jpg
new file mode 100644
index 000000000..28caafe10
Binary files /dev/null and b/content/about/bg_new.jpg differ
diff --git a/content/about/index.md b/content/about/index.md
index 39ce69c2e..35653069b 100644
--- a/content/about/index.md
+++ b/content/about/index.md
@@ -6,7 +6,7 @@ insert_anchor_links: "left"
 
 <!-- section 1 (header) -->
 
-{% row(style="semiNarrow mbottom" bgPath="images/bg_new.jpg") %}
+{% row(style="semiNarrow mbottom" bgPath="bg_new.jpg") %}
 
 <br>
 
diff --git a/templates/shortcodes/row.html b/templates/shortcodes/row.html
index 63986ea48..afded5a42 100644
--- a/templates/shortcodes/row.html
+++ b/templates/shortcodes/row.html
@@ -124,7 +124,8 @@ Parameters:
 <!-- makes row full screen width and adds background img -->
 {% set styles = ""  %}
 {% if bgPath %}
-    {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover; background-position: bottom"  %}
+    {% set background_url = page.permalink ~ bgPath %}
+    {% set styles = "background: url('" ~ background_url ~ "'); background-size: cover; background-position: bottom;"  %}
     {% set row_class = row_class ~ "w-screen sm:-mx-12 md:-mx-16 lg:-mx-20" %}
 {% endif %}
 {% if bgColor %}
@@ -135,6 +136,13 @@ Parameters:
     {% set styles = "background: " ~ gradient ~ "; background-size: cover"  %}
     {% set row_class = row_class ~ " w-auto -mx-4 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
 {% endif %}
+{% if bgStyle %}
+        {% if "full" in bgStyle %}
+            {% set styles = styles ~ "height: -webkit-fill-available; height: 100vh;"  %}
+        {% elif "hero" in bgStyle %}
+            {% set div_class = div_class ~ " -mt-24 pt-12 " %}
+        {% endif %}
+    {% endif %}
 
 {% set url = body | split(pat="href=") | slice(start=1) | first | split(pat=">") | first | trim_start_matches(pat='"') %}