diff --git a/data/gui/window/story_viewer.cfg b/data/gui/window/story_viewer.cfg
index fbf2a025f36..843cee8028a 100644
--- a/data/gui/window/story_viewer.cfg
+++ b/data/gui/window/story_viewer.cfg
@@ -11,39 +11,78 @@
 #enddef
 
 #define _GUI_TEXT_PANEL
-	[panel]
-		id = "text_panel"
-		definition = "wml_message"
+	[stacked_widget]
+		id = "text_and_control_stack"
 
-		[grid]
+		[layer]
 
 			[row]
 				grow_factor = 0
 
-				{_GUI_BUFFER}
-
 				[column]
-					grow_factor = 1
-					border = "all"
-					border_size = 10
 					horizontal_grow = true
 					vertical_grow = true
 
-					[label]
-						definition = "default"
-						id = "part_text"
+					[panel]
+						id = "text_panel"
+						definition = "wml_message"
+
+						[grid]
+
+							[row]
+								grow_factor = 0
+
+								{_GUI_BUFFER}
+
+								[column]
+									grow_factor = 1
+									border = "all"
+									border_size = 10
+									horizontal_grow = true
+									vertical_grow = true
+
+									[scroll_label]
+										definition = "default"
+										id = "part_text"
+
+										use_markup = true
+									[/scroll_label]
+								[/column]
+
+								{_GUI_BUFFER}
+
+								# Reserve space equal to the size of the controls area.
+								[column]
+									grow_factor = 0
+
+									[spacer]
+										linked_group = "controls"
+									[/spacer]
+								[/column]
+
+							[/row]
+
+						[/grid]
+
+					[/panel]
 
-						wrap = true
-						use_markup = true
-					[/label]
 				[/column]
 
+			[/row]
+
+		[/layer]
+
+		[layer]
+
+			[row]
+
 				[column]
-					grow_factor = 0
-					horizontal_alignment = "right"
+					grow_factor = 1
+					horizontal_grow = true
 					vertical_alignment = "bottom"
 
 					[grid]
+						linked_group = "controls"
 
 						# TODO: proper left/right buttons
 						[row]
@@ -51,6 +90,7 @@
 							[column]
 								border = "left,right,top"
 								border_size = 10
+								horizontal_alignment = "right"
 
 								[button]
 									id = "next"
@@ -67,6 +107,7 @@
 							[column]
 								border = "left,right"
 								border_size = 10
+								horizontal_alignment = "right"
 
 								[button]
 									id = "back"
@@ -83,6 +124,7 @@
 							[column]
 								border = "all"
 								border_size = 10
+								horizontal_alignment = "right"
 
 								[button]
 									id = "cancel"
@@ -102,9 +144,9 @@
 
 			[/row]
 
-		[/grid]
+		[/layer]
 
-	[/panel]
+	[/stacked_widget]
 #enddef
 
 [window_definition]
@@ -179,6 +221,11 @@
 			fixed_width = true
 		[/linked_group]
 
+		[linked_group]
+			id = "controls"
+			fixed_width = true
+		[/linked_group]
+
 		[grid]
 
 			[row]
diff --git a/src/gui/dialogs/story_viewer.cpp b/src/gui/dialogs/story_viewer.cpp
index 4fdddf0d17b..2f9df204cc3 100644
--- a/src/gui/dialogs/story_viewer.cpp
+++ b/src/gui/dialogs/story_viewer.cpp
@@ -19,11 +19,10 @@
 #include "formula/variant.hpp"
 #include "gui/auxiliary/find_widget.hpp"
 #include "gui/widgets/button.hpp"
-#include "gui/widgets/image.hpp"
 #include "gui/widgets/label.hpp"
 #include "gui/widgets/scroll_label.hpp"
 #include "gui/widgets/settings.hpp"
-#include "gui/widgets/settings.hpp"
+#include "gui/widgets/stacked_widget.hpp"
 #include "gui/widgets/window.hpp"
 
 namespace gui2
@@ -67,18 +66,43 @@ void story_viewer::display_part(window& window)
 	// Update Back button state. Doing this here so it gets called in pre_show too.
 	find_widget<button>(&window, "back", false).set_active(part_index_ != 0);
 
-	config cfg, shape;
+	config cfg, image;
 
 	for(const auto& layer : current_part_->get_background_layers()) {
-		//SDL_Rect image_rect;
+		const bool preserve_ratio = layer.keep_aspect_ratio();
 
-		shape["x"] = "(max(pos, 0) where pos = (width  / 2 - image_width  / 2))";
-		shape["y"] = "(max(pos, 0) where pos = (height / 2 - image_height / 2))";
-		shape["w"] = "(image_original_width * height / image_original_height)";
-		shape["h"] = "(height)";
-		shape["name"] = layer.file();
+		// By default, no scaling will be applied.
+		std::string width_formula  = "(image_original_width)";
+		std::string height_formula = "(image_original_height)";
 
-		cfg.add_child("image", shape);
+		// If scale width is true, the image will be stretched to screen width.
+		if(layer.scale_horizontally()) {
+			width_formula = "(width)";
+
+			// Override height formula to preserve ratio, if applicable.
+			if(preserve_ratio) {
+				height_formula = "(image_original_height * width / image_original_width)";
+			}
+		}
+
+		// If scale height is true, the image will be stretched to screen height.
+		if(layer.scale_vertically()) {
+			height_formula = "(height)";
+
+			// Override width formula to preserve ratio, if applicable.
+			if(preserve_ratio) {
+				width_formula = "(image_original_width * height / image_original_height)";
+			}
+		}
+
+		// Background layers are always centered.
+		image["x"] = "(max(pos, 0) where pos = (width  / 2 - image_width  / 2))";
+		image["y"] = "(max(pos, 0) where pos = (height / 2 - image_height / 2))";
+		image["w"] = width_formula;
+		image["h"] = height_formula;
+		image["name"] = layer.file();
+
+		cfg.add_child("image", image);
 	}
 
 	canvas& window_canvas = window.get_canvas(0);
@@ -93,7 +117,20 @@ void story_viewer::display_part(window& window)
 	const std::string title = current_part_->title().empty() ? " " : current_part_->title();
 	find_widget<label>(&window, "title", false).set_label(title);
 
-	find_widget<label>(&window, "part_text", false).set_label(current_part_->text());
+	const std::string& part_text = current_part_->text();
+	stacked_widget& text_stack = find_widget<stacked_widget>(&window, "text_and_control_stack", false);
+
+	if(part_text.empty()) {
+		// No text for this part, hide the text layer.
+		text_stack.select_layer(1);
+	} else {
+		// If the text panel was previously hidden, re-show it.
+		if(text_stack.current_layer() != -1) {
+			text_stack.select_layer(-1);
+		}
+
+		find_widget<scroll_label>(&window, "part_text", false).set_label(part_text);
+	}
 }
 
 void story_viewer::nav_button_callback(window& window, NAV_DIRECTION direction)