Code to control background attachment

src/pyj/read_book/prefs/user_stylesheet.pyj

@@ -40,6 +40,18 @@ def background_widget(sd):
     )
 
 
+def background_style_widget(sd):
+    ans = E.div(E.label(
+        _('Background image style') + ':\xa0',
+        E.select(name='background_image_style',
+            E.option(_('Scaled'), value='scaled'),
+            E.option(_('Tiled'), value='tiled'),
+        ),
+    ))
+    ans.querySelector('select').value = sd.get('background_image_style')
+    return ans
+
+
 def create_user_stylesheet_panel(container):
     sd = get_session_data()
     container.appendChild(
@@ -49,6 +61,7 @@ def create_user_stylesheet_panel(container):
                 style='border-bottom: solid 1px; margin-bottom: 1.5ex; padding-bottom: 1.5ex',
                 E.div(_('Choose a background image to display behind the book text'), style='margin-bottom: 1.5ex'),
                 background_widget(sd),
+                background_style_widget(sd),
             ),
             E.div(
                 style='flex-grow: 10; display: flex; flex-flow: column',
@@ -85,5 +98,10 @@ def commit_user_stylesheet(onchange, container):
     if old is not bg_image:
         sd.set('background_image', bg_image)
         changed = True
+    old = sd.get('background_image_style')
+    bis = container.querySelector('select[name=background_image_style]').value
+    if bis is not old:
+        changed = True
+        sd.set('background_image_style', bis)
     if changed:
         onchange()

src/pyj/read_book/view.pyj

@@ -442,12 +442,19 @@ class View:
             self.iframe.style.backgroundColor = ans.background or 'white'
             bg_image = sd.get('background_image')
             if bg_image:
-                if runtime.is_standalone_viewer:
-                    self.iframe.style.backgroundImage = f'url({READER_BACKGROUND_URL})'
-                else:
-                    self.iframe.style.backgroundImage = f'url({bg_image})'
+                self.iframe.style.backgroundImage = f'url({READER_BACKGROUND_URL})' if runtime.is_standalone_viewer else f'url({bg_image})'
             else:
                 self.iframe.style.backgroundImage = 'none'
+            if sd.get('background_image_style') is 'scaled':
+                self.iframe.style.backgroundSize = '100% 100%'
+                self.iframe.style.backgroundRepeat = 'no-repeat'
+                self.iframe.style.backgroundAttachment = 'scroll'
+                self.iframe.style.backgroundPosition = 'center'
+            else:
+                self.iframe.style.backgroundSize = 'auto'
+                self.iframe.style.backgroundRepeat = 'repeat'
+                self.iframe.style.backgroundAttachment = 'scroll'
+                self.iframe.style.backgroundPosition = '0 0'
 
             m.parentNode.style.backgroundColor = ans.background  # this is needed on iOS where the bottom margin has its own margin, so we dont want the body background color to bleed through
             self.content_popup_overlay.apply_color_scheme(ans.background, ans.foreground)

src/pyj/session.pyj

@@ -35,7 +35,7 @@ defaults = {
     'columns_per_screen': {'portrait':0, 'landscape':0},
     'user_stylesheet': '',
     'background_image': None,
-    'background_image_style': 'stretch',
+    'background_image_style': 'scaled',
     'current_color_scheme': 'white',
     'user_color_schemes': {},
     'base_font_size': 16,