diff --git a/catview.js b/catview.js
index ea9c718e7bf6d37693374908d0ba9c534f127c5d..bec95b26b0c6d2da9504003a08b54910f552d059 100644
--- a/catview.js
+++ b/catview.js
@@ -25,7 +25,7 @@
 // CATview - the Colored & Aligned Texts view
 class CATview{
   constructor(_parent_id, _orientation, _x_inverted, _y_inverted){
-    this.version = '3.beta.5';
+    this.version = '3.beta.5.1';
     this.debug = false;
     if(this.debug)
       console.log('CATview.initialize');
@@ -56,6 +56,7 @@ class CATview{
     this.font_size_names = 14;
 
     // • colors of basic segments (rectangles)
+    this.background = "#f8f8f8";
     this.scale_color = d3.scaleLinear().domain([0, 1]).range(["#C1C1E9", "#0000A3"]);
     this.rect_border = "stroke: #2f2f86;";
     this.equality_color = '#d9d9d9';
@@ -1208,7 +1209,6 @@ class CATview{
 
       // define gradients
       d3.select("defs#"+this.parent_id+"_gradient_definition").remove();
-      let rect_outline_width = Number(d3.select("#"+this.parent_id).select("rect.segment-rect").style("stroke-width").split("px")[0]);
 
       this.content.select(".alignment")
       .append("defs")
@@ -1221,11 +1221,15 @@ class CATview{
       .attr("y2", this.vertical === true ? "1" : "0")
       .append("stop")
       .attr("offset", "20%")
-      .attr("stop-color", "rgba(248,248,248,1)") // "rgba(0,0,248,1)"
+      .attr("stop-color", this.background) // "rgba(248,248,248,1)") // "rgba(0,0,248,1)"
+      .attr("stop-opacity", 1.0);
+      //.attr("stop-color", "rgba(248,248,248,1)") // "rgba(0,0,248,1)"
       this.content.select(".alignment").select("defs").select("linearGradient#"+this.parent_id+"_gradient_left")
       .append("stop")
       .attr("offset", "80%")
-      .attr("stop-color", "rgba(248,248,248,0)"); // hier 0 statt 1 für Transparenz
+      .attr("stop-color", this.background) // "rgba(248,248,248,1)") // "rgba(0,0,248,1)"
+      .attr("stop-opacity", 0.0);
+      //.attr("stop-color", "rgba(248,248,248,0)"); // hier 0 statt 1 für Transparenz
 
       // right gradient
       this.content.select(".alignment").select("defs#"+this.parent_id+"_gradient_definition")
@@ -1237,12 +1241,15 @@ class CATview{
       .attr("y2", this.vertical === true ? "1" : "0")
       .append("stop")
       .attr("offset", "20%")
-      .attr("stop-color", "rgba(248,248,248,0)")
+      .attr("stop-color", this.background) // "rgba(248,248,248,1)") // "rgba(0,0,248,1)"
+      .attr("stop-opacity", 0.0);
+      //.attr("stop-color", "rgba(248,248,248,0)")
       this.content.select(".alignment").select("defs").select("linearGradient#"+this.parent_id+"_gradient_right")
       .append("stop")
       .attr("offset", "80%")
-      .attr("stop-color", "rgba(248,248,248,1)") // "rgba(0,0,248,1)" (blue) , "rgba(248,248,248,1)" (transparent)
-      ;
+      .attr("stop-color", this.background) // "rgba(248,248,248,1)") // "rgba(0,0,248,1)"
+      .attr("stop-opacity", 1.0);
+      //.attr("stop-color", "rgba(248,248,248,1)") // "rgba(0,0,248,1)" (blue) , "rgba(248,248,248,1)" (transparent)
 
       // also draw faded borders if enabled
       this.draw_fadeout();
@@ -2446,8 +2453,10 @@ class CATview{
     if(_color == null)
       return false;
 
+    this.background = _color;
     document.querySelector('#' + this.parent_id + ' svg').style.backgroundColor = _color;
     document.querySelector('#' + this.parent_id + ' .edge-name').style.backgroundColor = _color;
+    // TODO also update the fade outs
     return true;
   };
   toggle_equality_color = function(_enable){