TiddlyWiki5/editions/tw5.com/tiddlers/howtos/Setting a page background image.tid

created: 20150417155912612
modified: 20160610082700598
tags: [[Customise TiddlyWiki]]
title: Setting a page background image
type: text/vnd.tiddlywiki

# Import your image as a tiddler (see [[Images in WikiText]])
#* You can also use an [[external image|ExternalImages]]
# Open the [[control panel|$:/ControlPanel]] <<.icon $:/core/images/options-button>> and switch to the ''Appearance''/''Theme Tweaks'' tab
# Select your image from the dropdown labelled "Page background image"
# Set "Page background image attachment" to "Fixed to window" to have the background stay stationary and the content to scroll over the top of it, or "Scroll with tiddlers" to have it move (note that the iPhone/iPad [[doesn't support the fixed setting|http://stackoverflow.com/a/20444219]] for performance reasons)
# Set "Page background image size" as follows:
#* ''Auto'' causes the background image to be tiled over the page background
#* ''Cover'' causes the background image to be sized so that it completely covers the page. Some of the image may be clipped
#* ''Contain'' causes the background image to be sized so that it fits within the page

Note that the palette ''DarkPhotos'' is provided to make the sidebar more readable on dark background images.
Docs updates 2015-04-17 16:07:47 +00:00			`created: 20150417155912612`
Update document in tiddlywiki.com edition * Add string '.htm' to 'Saving with TiddlyIE' * Change external links to match locale with wiki language * Add instructions for use to 'Saving on Android' * Change string in 'task' * Change instructions for use in 'Saving on iPad/iPhone' * Add newline to 'TiddlyDesktop Releases' * Remove caption from 'Serving TW5 from Android' * Change link to external in tiddlers which tagged 'Editions' * Remove string 'index.html' from 'Some of the things you can do with TiddlyWiki' * Change link 'TiddlyWiki Groups' to 'Forums' in tiddlers which tagged 'Community' * Remove CamelCase link 'TiddlyWiki' from tiddlers tagged 'Community' * Change string 'done' to 'Upgrade' in 'UpgradeMechanism' * Change buttons to images in 'How to export tiddlers' * Add images about buttons to tiddlers * Add quotation mark to text 'edit' in 'Signing the Contributor License Agreement' * Rename 'UsingSVG' to 'Using SVG' * Change link 'TypedBlockWikiText' to 'Typed Blocks in WikiText' in 'Using SVG' * Add tiddler 'Using Stamp' * Add 'rel="noopener noreferrer"' to external links * Add description about 'rel="noreferrer"' to 'HTML in WikiText' * Add link of prerelease version about translators edition, and how to translate on Node.js, in 'Translate TiddlyWiki into your language' * Change string 'dropdown' to 'tab' in 'Installing a plugin from the plugin library' * Add download button to 'Empty Edition' 2016-05-03 02:28:06 +00:00			`modified: 20160610082700598`
Docs updates 2015-04-17 16:07:47 +00:00			`tags: [[Customise TiddlyWiki]]`
			`title: Setting a page background image`
			`type: text/vnd.tiddlywiki`

			`# Import your image as a tiddler (see [[Images in WikiText]])`
			`#* You can also use an [[external image\|ExternalImages]]`
Fix sizes of SVG icons in documentation Fixes #4153 2019-10-13 14:35:36 +00:00			`# Open the [[control panel\|$:/ControlPanel]] <<.icon $:/core/images/options-button>> and switch to the ''Appearance''/''Theme Tweaks'' tab`
Docs updates 2015-04-17 16:07:47 +00:00			`# Select your image from the dropdown labelled "Page background image"`
			`# Set "Page background image attachment" to "Fixed to window" to have the background stay stationary and the content to scroll over the top of it, or "Scroll with tiddlers" to have it move (note that the iPhone/iPad [[doesn't support the fixed setting\|http://stackoverflow.com/a/20444219]] for performance reasons)`
			`# Set "Page background image size" as follows:`
			`#* ''Auto'' causes the background image to be tiled over the page background`
			`#* ''Cover'' causes the background image to be sized so that it completely covers the page. Some of the image may be clipped`
			`#* ''Contain'' causes the background image to be sized so that it fits within the page`

			`Note that the palette ''DarkPhotos'' is provided to make the sidebar more readable on dark background images.`