Speed Dreams allows for the creation of menus using XML. This makes it easier for non-programmers to make nice looking menu screens. A programmer is still needed to connect the menu to the Speed Dreams software. The menu author needs to create XML file and provide the images for the screen. A good place to start is studying existing XML menu files : the code behind the menu will normally support any change to the existing controls, even new static controls ... but of course, it will ignore any new dynamic control, and don't even think to change the name of the dynamic controls.
Beware, 1.4.0 and 2.x use different XML formats (see below).
Menu Control Types and supported attributes
Screen Position System
The dimensions for the menu screen are 640x480.
Speed Dreams scales these values to the actual dimensions of the screen.
This allows Speed Dreams menu screens to look correct within a wide range of screen aspect ratios.
The background image is left/right or top/bottom clipped (or not), depending on the aspect ratio of the screen (4/3, 16/9, and etc)
2.0 (and newer)
Actually, for any revision of the SVN trunk newer than r3713.
Work-in-progress (Jean-Philippe)
Common to all or most controls
- "x" (number) : X coordinate of the lower left corner of the control, unit = screen coord, 0 = left side of the screen, positive towards the right side, may be negative
- "y" (number) : Y coordinate of the lower left corner, unit = screen coord, 0 = bottom of the screen, positive towards the top, may be negative
- "width" (number) : width of the bounding box of the control, unit = screen coord, positive
- "height" (number) : height of the bounding box of the control, unit = screen coord, positive
- "font" (string) : name of the font of the text, in { "small", "medium", "large", "big", "small_c", "medium_c", "large_c", "big_c", "digital" }
- "xxx color" (string) : 32 bit ARGB color code, as C-syntax hexadecimal integer literal ; warning: the alpha channel is the high byte (ARGB, not RGBA), and it is optional (default: 0xFF = 100% = opaque, so you can't specify a 100% transparent = invisible color) ; example : 0x80FF0000 = 50% transparent red, 0x00FF00 = opaque green
- "tip" (string) : Text to display in the tip zone of the menu when the control is focused (at the bottom center by default)
Notes:
- For the control position and size, the dimensions of the screen are 640x480. Speed Dreams scales these values to the actual screen size. This allows the menu to look good in a quite wide range of real screen aspect-ratios. The background image is by the way never deformed : it is clipped on its left/right or top/bottom sides, depending on whether the real aspect ratio of the screen (4/3, 16/9 ... etc ...) is lower of greater that 16/10.
- Most controls are said to be "focused" when the mouse cursor is inside their bounding box,
- As you can't specify a fully transparent control (null alpha channel is interpreted as opaque), if you want to hide a control in a menu, simply comment it out, by surrounding it like this : <!-- control --> (standard XML comment syntax)
- The "_c" fonts are more often used in the real-time 3D race screen, as well as the "digital" one ; the others are generally used in the menu ; but you can use any font for any purpose
- Warning about the "digital" font : it only supports digital (0-9) chars
- Some 'default' values for the control properties can be changed in the screen.xml file, see below.
Label

A control for displaying static text, or text that can change, but that the user can't edit.
- "tip" (string) : Text to display in the tip zone of the menu when the control is focused (optional, default: empty)
- "text" (string) : Initial text (optional, default: empty)
- "max len" (number) : Max number of chars displayed (optional, default: len(text))
- "x" (number) : X coordinate of the lower left corner of the control (optional, default: 0)
- "y" (number) : Y coordinate of the lower left corner (optional, default: 0)
- "width" (number) : target width of the control (optional, default: actual width of the text)
- "h align" (string) : horizontal alignment in the bounding box { "left", "right", "center" } (optional, default: "left")
- "font" (string) : font of the text (optional, default: medium)
- "color" (string) : text color when the label is not focused (optional, default: see screen.xml)
- "focused color" (string) : text color when the label is focused (optional, default: see screen.xml)
Example:
<section name="TopSpeed">
<attstr name="type" val="label"/>
<attnum name="tip" val="Top speed so far"/>
<attnum name="max len" val="3"/>
<attnum name="x" val="25"/>
<attnum name="width" val="25"/>
<attstr name="h align" val="right"/>
<attstr name="color" val="0xFFFFFF"/>
<attstr name="focused color" val="0xC000FF00"/>
<attstr name="font" val="medium_c"/>
</section>
Notes:
- Warning : "text" and "max len" are optional properties, but if "max len" is not specified, len(text) will be the limit for any future text (unless it is 0, in which case, the length of the 1st non-empty text will be used as the limit)
- in other words, if you label can change, specify "max len" ; if not, you can simply specify "text"
- The height of the bounding box is automatically computed from the selected font specs (don't forget the "descender" of any font, that makes the lower left corner of an 'a' being lower than expected, simply because some other letters, like 'p' or 'q' feature a "leg" ; neither forget the upper part of some letters, like 'l' or 't', that is obviously bigger that for an 'a').
- The background colors (when focused or not) can't be customized for each label, they are set to the screen background color (see screen.xml).
- You must specify "width" for a right or center-aligned label
Edit-box

A control for displaying text and make the user able to edit it with the keyboard (add, remove, change individual chars).
- "text" (string) : Initial text (optional, default: empty)
- "max len" (number) : Max number of chars displayed (optional, default: len(text))
- "x" (number) : X coordinate of the lower left corner of the control (optional, default: 0)
- "y" (number) : Y coordinate of the lower left corner (optional, default: 0)
- "width" (number) : target width of the control, padding included (optional, default: actual width of the text)
- "h align" (string) : horizontal alignment in the bounding box { "left", "right", "center" } (optional, default: "left")
- "font" (string) : font of the text (optional, default: medium)
- "color" (string) : text color when the label is not focused (optional, default: see screen.xml)
- "focused color" (string) : text color when the label is focused (optional, default: see screen.xml)
- "disabled color" (string) : text color when the label is disabled (optional, default: see screen.xml)
- "bg color" (string) : background color when the label is not focused (optional, default: see screen.xml)
- "focused bg color" (string) : background color when the label is focused (optional, default: see screen.xml)
- "disabled bg color" (string) : background color when the label is disabled (optional, default: see screen.xml)
Example:
<section name="lodedit">
<attstr name="type" val="edit box"/>
<attnum name="max len" val="16"/>
<attstr name="tip" val="Level of detail"/>
<attnum name="x" val="420"/>
<attnum name="y" val="270"/>
<attnum name="width" val="100"/>
<attstr name="h align" val="right"/>
<attstr name="font" val="medium"/>
</section>
Notes:
- There's currently no support for edit-box tips.
- Warning : "text" and "max len" are optional properties, but at least one must be specified for the control to be actually usable (otherwise, only empty text displayable ??? to be checked),
- The height of the bounding box is automatically computed from the selected font specs (see Label control), and some horizontal and vertical padding is added (see screen.xml).
- The color of the text cursor can't be customized for each edit-box, but see screen.xml.
- The horizontal and vertical padding around the text can be customized in screen.xml (see below).
- You must specify "width" for a right or center-aligned edit-box
Text button

A control displaying text, that triggers some action when the user clicks on it. An optional aditional image can also be displayed, according to the button state.
- "tip" (string) : Text to display in the tip zone of the menu when the control is focused (optional, default: empty)
- "text" (string) : Text (optional, default: empty)
- "x" (number) : X coordinate of the lower left corner of the control (optional, default: 0)
- "y" (number) : Y coordinate of the lower left corner (optional, default: 0)
- "width" (number) : target width of the control, padding included (optional, default: 300)
- "h align" (string) : horizontal alignment in the bounding box in { "left", "right", "center" } (optional, default: "left")
- "font" (string) : font of the text (optional, default: medium)
- "color" (string) : text color when the button is not focused (optional, default: see screen.xml)
- "focused color" (string) : text color when the button is focused (optional, default: see screen.xml)
- "pushed color" (string) : text color when the button is disabled (optional, default: see screen.xml)
- "image x" (number) : X coordinate of the lower left corner of the image, relative to the X coordinate of the button (optional, default: 0)
- "image y" (number) : Y coordinate of the lower left corner of the image, relative to the Y coordinate of the button (optional, default: 0)
- "image width" (number) : displayed width of the image (optional, default: 20)
- "image height" (number) : displayed height of the image (optional, default: 20)
- "enabled image" (text) : file name of the image to display when the button is enabled but not focused or pushed(optional, default: no image)
- "disabled image" (text) : file name of the image to display when the button is disabled (optional, default: no image)
- "focused image" (text) : file name of the image to display when the button is enabled and focused (optional, default: no image)
- "pushed image" (text) : file name of the image to display when the button is enabled and pushed (optional, default: no image)
- "show box" (boolean string) : show / hide the bounding box, in { "true", "yes", "false", "no" } (optional, default: "no")
Example:
<section name="race">
<attstr name="type" val="text button"/>
<attstr name="show box" val="no"/>
<attstr name="text" val="Race"/>
<attstr name="tip" val="Race menus"/>
<attnum name="x" val="270"/>
<attnum name="y" val="300"/>
<attnum name="width" val="150"/>
<attstr name="h align" val="left"/>
<attstr name="font" val="large"/>
<attstr name="color" val="0xFFFFFF"/>
<attstr name="focused color" val="0XFFCC00"/>
<attstr name="pushed color" val="0xE61933"/>
<attnum name="image x" val="-20"/>
<attnum name="image y" val="0"/>
<attnum name="image width" val="30"/>
<attnum name="image height" val="30"/>
<attstr name="focused image" val="data/img/icon-race.png"/>
</section>
Notes:
- The height of the bounding box is automatically computed from the selected font specs (see Label control), and some horizontal and vertical padding is added (see screen.xml).
- The background colors (when focused or pushed or not) can't be customized for each button, but see scren.xml.
- Same for the color for when the button is disabled.
- The image file names are actually file path-names relative to the run-time current directory ; only the JPEG and PNG image format are supported for the moment ; power of 2 dimensions (like 32x16 or 128x128) are highly recommended for better compatibility with lower graphics backends.
- Warning: All the images must be the same size.
- The horizontal and vertical padding around the text can be customized in screen.xml (see below).
- You must specify "width" for a right or center-aligned text-button

A control displaying an image, that triggers some action when the user clicks on it.
- "tip" (string) : Text to display in the tip zone of the menu when the control is focused (optional, default: empty)
- "x" (number) : X coordinate of the lower left corner of the control (optional, default: 0)
- "y" (number) : Y coordinate of the lower left corner (optional, default: 0)
- "width" (number) : width of the control, padding included (optional, default: image width from the files)
- "height" (number) : height of the control, padding included (optional, default: image height from the files)
- "enabled image" (text) : file name of the image to display when the button is enabled but not focused or pushed (mandatory)
- "disabled image" (text) : file name of the image to display when the button is disabled (mandatory)
- "focused image" (text) : file name of the image to display when the button is enabled and focused (mandatory)
- "pushed image" (text) : file name of the image to display when the button is enabled and pushed (mandatory)
Example:
<section name="shufflebutton">
<attstr name="type" val="image button"/>
<attstr name="tip" val="Shuffle the current competitors"/>
<attnum name="x" val="255"/>
<attnum name="y" val="210"/>
<attnum name="width" val="32"/>
<attnum name="height" val="48"/>
<attstr name="disabled image" val="data/img/shuffle-disabled.png"/>
<attstr name="enabled image" val="data/img/shuffle.png"/>
<attstr name="focused image" val="data/img/shuffle-focused.png"/>
<attstr name="pushed image" val="data/img/shuffle-pushed.png"/>
</section>
Notes:
- Warning: All the images must be the same size.
- The image file names are actually file path-names relative to the run-time current directory (ex: "data/img/arrow.png") ; only the JPEG and PNG image format are supported for the moment ; power of 2 dimensions (like 32x16 or 128x128) are highly recommended for better compatibility with lower graphics backends.
- The horizontal and vertical padding can be customized in screen.xml (see below).

A control that displays a scrollable list of items in a rectangle box, items that you can select only one at a time.
- "x" (number) : X coordinate of the lower left corner of the item box (optional, default: 0)
- "y" (number) : Y coordinate of the lower left corner of the item box (optional, default: 0)
- "width" (number) : width of the item box (optional, default: 100)
- "height" (number) : height of the control = height of the item box (optional, default: 100)
- "font" (string) : font of the text of the items (optional, default: medium)
- "color" (string) : foreground color of the text of the non-selected items and of the item box when no item is selected (optional, default: see screen.xml)
- "selected color" (string) : foreground color of the text of the selected item and of the item box when 1 item is selected (optional, default: see screen.xml)
- "scrollbar pos" (text) : position of the vertical scroll-bar, in { "none", "left", "right" }, relative to the item box (optional, default: "none")
- "scrollbar width" (number) : width of the vertical scroll-bar (or height when an horizontal one) in screen coord units (optional, default: 20)
- "scrollbar buttons height" (number) : height of the arrow buttons of the vertical scroll-bar (or width when an horizontal one) in screen coord units (optional, default: 20)
Example:
<section name="competitorsscrolllist">
<attstr name="type" val="scroll list"/>
<attnum name="x" val="20"/>
<attnum name="y" val="215"/>
<attnum name="width" val="200"/>
<attnum name="height" val="150"/>
<attstr name="font" val="small"/>
<attstr name="color" val="0xFFFFFF"/>
<attstr name="selected color" val="0xFFCC00"/>
<attstr name="scrollbar pos" val="right"/>
<attstr name="scrollbar buttons height" val="20"/>
</section>
Notes:
- There's currently no support for scroll-list tips.
- Items longer than the scroll-list item box width are not clipped, thus being rendered partly out of the item box. There is no horizontal scroll-bar.
- The optional vertical scroll bar is always displayed, even if when useless.
- You can't customize the background color (for the normal and selected state) for each scroll-list, but see screen.xml below.
- The scroll-bar settings are quite hard-coded :
- there's no background color,
- arrow buttons images can't be changed (data/img/arrow-up/down*.png)
- their height is 10.
- only their width is customizable, through the "scrollbar width" attribute of the scroll-list.
- and also the height of the scroll-bar buttons, through the "scrollbar buttons height" attribute of the scroll-list.
Combo-box

A control allowing the user to choose among a list of choices, of which only one is visible at a time. It is rendered as a kind of spin-box, with a left arrow button on the left, a right arrow button on the right, and the text of the currently selected item in the middle ; clicking on the left arrow will select the previous item, on the right the next one.
- "tip" (string) : Text to display in the tip zone of the menu when the control is focused (optional, default: empty)
- "text" (string) : Initial text for the central label (optional, default: empty)
- "max len" (number) : Max number of chars displayed for the central text label (optional, default: len(text))
- "x" (number) : X coordinate of the lower left corner of the control, actually the left button arrow (optional, default: 0)
- "y" (number) : Y coordinate of the lower left corner (optional, default: 0)
- "width" (number) : target width of the whole control, left and right arrow images included (optional, default: 200)
- "arrows width" (number) : width of the arrow buttons, padding included (optional, default: image width from the files)
- "arrows height" (number) : height of the control, padding included (optional, default: image height from the files)
- "font" (string) : font of the text (optional, default: medium)
- "color" (string) : text color when the control is not focused (optional, default: see screen.xml)
- "focused color" (string) : text color when the control is focused (optional, default: see screen.xml)
Example:
<section name="CategoryCombo">
<attstr name="type" val="combo box"/>
<attnum name="max len" val="30"/>
<attstr name="tip" val="Select your car category"/>
<attnum name="x" val="120"/>
<attnum name="y" val="360"/>
<attnum name="width" val="220"/>
<attnum name="arrows width" val="32"/>
<attnum name="arrows height" val="24"/>
<attstr name="color" val="0xFFFFFF"/>
<attstr name="focused color" val="0XFFCC00"/>
<attstr name="font" val="small"/>
</section>
Notes:
- "text" is generally no use, as it serves only as long as the user clicks on 1 of the arrow buttons
- But warning : "text" and "max len" are optional properties, but if "max len" is not specified, len(text) will be the limit for all the combo-items (unless it is 0, in which case, the length of the 1st item will be used as the limit),
- The left and right arrow button images are not customizable for a specific combo : no choice, they are data/img/arrow-left/right*.png
- Their color behavior is neither customizable (when focused, clicked ...)
- The text label and arrow images are automatically vertically centered ; the text label is automatically horizontally centered
Progress-bar

A control that displays a kind of rectangular gauge, that users can't change directly (not interactive)
- "tip" (string) : Text to display in the tip zone of the menu when the control is focused (optional, default: empty)
- "x" (number) : X coordinate of the lower left corner of the control (optional, default: 0)
- "y" (number) : Y coordinate of the lower left corner (optional, default: 0)
- "width" (number) : width of the control (optional, default: 100)
- "height" (number) : height of the control (optional, default: 20)
- "image" (text) : file name of the image that is right clipped in order to display the value of the gauge (optional, default: data/img/progressbar.png)
- "bg image" (text) : file name of the gauge background image (optional, default: data/img/progressbar-bg.png)
- "color" (string) : color of the outline around the gauge (optional, default: see screen.xml)
- "min" (number) : Value that corresponds to the left-most position of the gauge (optional, default: 0)
- "max" (number) : Value that corresponds to the right-most position of the gauge (optional, default: 100)
- "value" (number) : Initial value (optional, default: 50)
Example:
<section name="HighSpeedGripProgress">
<attstr name="type" val="progress bar"/>
<attnum name="x" val="480"/>
<attnum name="y" val="275"/>
<attnum name="width" val="140"/>
<attnum name="height" val="17"/>
<attnum name="min" val="0"/>
<attnum name="max" val="50"/>
<attnum name="value" val="30"/>
<attstr name="tip" val="Aerodynamic downforce, at high speeds (0 to 50 m/s2)"/>
</section>
Check-box

A control displaying a checked/unchecked toggle that the user can toggle on and off, and a text label on the right.
- "tip" (string) : Text to display in the tip zone of the menu when the control is focused (optional, default: empty)
- "text" (string) : Text label (optional, default: empty)
- "x" (number) : X coordinate of the lower left corner of the control = checked/unchecked image (optional, default: 0)
- "y" (number) : Y coordinate of the lower left corner (optional, default: 0)
- "image width" (number) : width of the checked/unchecked image, padding included (optional, default: 30)
- "image height" (number) : height of the checked/unchecked image, padding included (optional, default: 30)
- "font" (string) : font of the text label displayed on the right of the checked/unchecked image (optional, default: medium)
- "color" (string) : foreground color of the text label (optional, default: see screen.xml)
- "checked" (boolean string) : initial state, in { "true", "yes", "false", "no" } (optional, default: "false")
Example:
<section name="playerreadycheckbox">
<attstr name="type" val="check box"/>
<attstr name="text" val="Ready to race"/>
<attstr name="tip" val="Check to warn everyone you are ready for the race"/>
<attnum name="x" val="10"/>
<attnum name="y" val="120"/>
<attnum name="image width" val="24"/>
<attnum name="image height" val="24"/>
<attstr name="color" val="0xFFFFFF"/>
<attstr name="font" val="medium"/>
<attstr name="checked" val="no"/>
</section>
Notes:
- The text label and checked/unchecked image are automatically vertically centered
- The checked/unchecked images can't be customized for a specific check-box (no choice, they are data/img/checked.png and data/img/unchecked.png files)
Static image

An image stack wrapped into a rectangular area of the screen.
- "x" (number) : X coordinate of the lower left corner of the target rectangle area (optional, default: 0)
- "y" (number) : Y coordinate of the lower left corner (optional, default: 0)
- "width" (number) : width of the target rectangle area (optional, default: 100)
- "height" (number) : height of the control, padding included (optional, default: 100)
- "image" (string) : PNG RGBA 8888 / JPEG RGB 888 image file to read the texture from ; no default; path relative to the run-time "data" folder, that is :
- <install prefix>/share/games/speed-dreams-2 under Linux (<install prefix> is often /usr/local or /usr)
- <install dir> under Windows (<install dir> is often C:\Program files\speed-dreams-2)
- "image1" (string) : file to read the 2nd texture from; no default; same path rules
- "image2" (string) : file to read the 3rd texture from ; no default; same path rules
- "image..." (string) : ...
- "can deform" (boolean string) : flag to allow image deformation, in { "true", "yes", "false", "no" } (optional, default: "yes" = no left/right or bottom/up clipping to fit the target width/height aspect ratio)
Example:
<section name="2">
<attstr name="type" val="static image"/>
<attnum name="x" val="-10"/>
<attnum name="y" val="380"/>
<attnum name="width" val="170"/>
<attnum name="height" val="100"/>
<attstr name="image" val="data/img/sd-logo.png"/>
</section>
Notes:
- The image file format is automatically detected from the file extension, that must be one of { ".png", ".PNG", ".jpg", ".JPG", ".jpeg", ".JPEG" }
- JPEG images are automatically assigned a 1.0 = opaque alpha channel
- The 1st image ("image" attribute) is displayed by default ; the code can select another image when needed
Background image

A menu background image with automatic left/right or bottom/up clipping if needed to fit the screen width/height aspect ratio.
- "image" (string) : PNG RGBA 8888 / JPEG RGB 888 image file to read the texture from ; no default; path relative to the run-time "data" folder, that is :
- <install prefix>/share/games/speed-dreams-2 under Linux (<install prefix> is often /usr/local or /usr)
- <install dir> under Windows (<install dir> is often C:\Program files (x86)\speed-dreams-2)
Example:
<section name="1">
<attstr name="type" val="background image"/>
<attstr name="image" val="data/img/splash-networkhost.jpg"/>
</section>
Notes:
- The image file format is automatically detected from the file extension, that must be one of { ".png", ".PNG", ".jpg", ".JPG", ".jpeg", ".JPEG" }
- JPEG images are automatically assigned a 1.0 = opaque alpha channel
- Non-power-of-2 dimensioned images are supported, even on hardwares that don't
1.4.0 (obsolete)
label - <text>,<x>,<y>,<textsize>,<alignH>,<alignV>,<maxlen>,<color>
backgroundimage - image that appears in the background of the image screen recommended size 1280x800
<image>
staticimage- Must be png and power of 2 image dimensions.
<image>,<x>,<y>,<width>,<height>
textbutton - <tip>,<text>,<x>,<y>,<textsize>,<alignH>,<width>,<showbox>,
<disabledimage>,<enabledimage>,<focusedimage>,<pushedimage>,
<imagex>,imagey>,<imagewidth>,<imageheight>,
<color>,<focuscolor>,<pushedcolor>
imagebutton - <tip>,<x>,<y>,<width>,<height>,
<disabledimage>,<enabledimage>,<focusedimage>,<pushedimage>,
<alignH>,<alignV>
editbox - <tip>,<text>,<x>,<y>,<textsize>,<alignH>,<width>
<maxlen>,<color>,<focuscolor>
scrolllist - <x>,<y>,<textsize>,<alignH>,<alignV>,<width>,<height>,
<scrollbarposition>,<color>,<selectcolor>
Allowed Values for attributes (default in bold)
<alignH> - left,center,right
<alignV> - bottom,center,top
<color>,<focuscolor>,<selectcolor> - HTML style color for example red FF0000 blue 0000ff green 00ff00
<textsize> - big,large,medium,small,big_c,large_c,medium_c,small_c,digit
<scrollbarposition> none,left,right
The XML menu file is divided into 4 sections you can organize in whatever order.
static controls
This section is where you put things that never change on your menu screen.
For example the title and the speed dreams logo found on many screens.
The controls can't have schemer-friendly names, they must be consecutive integers, starting from 1
dynamic controls
Controls that change based on menu choices such as buttons.
The controls can have schemer-friendly names, provided there's no duplicate in the XML file.
template controls
Like dynamic ones, but for which you specify only some attributes, as the code computes itself the other attributes.
properties
Values for variables that the code is expecting to build and/or layout the menu.
The properties can have schemer-friendly names, provided there's no duplicate in the XML file.
Be careful to closely work with developers if you want to add/remove properties.
As a schemer, you normally only change their values, not their names.
The screen.xml file
screen.xml controls the default colors, and fonts for all menu controls.
It is located in you user settings folder, in the config sub-folder
- 1.4.0 :
- Linux and MacOS : ~/.speed-dreams/config/screen.xml,
- Windows : <my documents>/speed-dreams.settings/config/screen.xml.
- 2.0.0 :
- Linux and MacOS : ~/.speed-dreams-2/config/screen.xml,
- Windows : <my documents>/speed-dreams-2.settings/config/screen.xml.
From 2.0.0, here are the control properties for which you can change the default value :
sd-menuview (1.4.0) or sd2-menuview (2.x) - This tool shows a preview of a menu from its XML file without running speed-dreams.
So a menu author can create menu concept screens without writing C++ code (see above though, for limitations).
Usage (1.4.x) : sd-menuview mycoolmenu.xml
Useful keys
q - Quit
F1 - Refresh/reload menu.xml file
Usage (2.x) : sd2-menuview mycoolmenu.xml
Useful keys
q / Q / Esc - Quit
F5 - Refresh/reload menu.xml file
bg-images.jpg (26.5 KB) - added by pouillot 3 years ago. “Background image examples”