diff --git a/src/pyj/read_book/prefs/user_stylesheet.pyj b/src/pyj/read_book/prefs/user_stylesheet.pyj index 2d8631e77b..ef33d333df 100644 --- a/src/pyj/read_book/prefs/user_stylesheet.pyj +++ b/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() diff --git a/src/pyj/read_book/view.pyj b/src/pyj/read_book/view.pyj index 8503888f20..48104911a9 100644 --- a/src/pyj/read_book/view.pyj +++ b/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) diff --git a/src/pyj/session.pyj b/src/pyj/session.pyj index bc4f39b2a5..1109401758 100644 --- a/src/pyj/session.pyj +++ b/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,