With PicsEngine 3 you can modify your background as you want.
You can change the background color or add many images with different alignments or repetition types (normal, horizontal, vertical, mosaic, scaled).
PNG images are also compatible so you can have images on other images to make this gallery beautiful.
The background color is in the <background> node.
<background>
<color type="hex">000000</color>
</background>
The color node is the background color in hexadecimal.
We can add images as many we want. Images are defined before are on the top. To add images, search the node <background>
Add a <images> node. This node will contain all your background images.
<background>
<!-- [...] -->
<images>
<!-- images definitions -->
</images>
</background>
Un noeud image est défini comme ceci:
<image>
<url type="image_path">image.png</url>
<type>normal</type> <!-- normal, scaled, repeatx, repeaty, repeat -->
<alignh>left</alignh> <!-- left, center, right -->
<alignv>top</alignv> <!-- top, center, bottom -->
<visible>both</visible> <!-- both, home, photo -->
</image>
<url> is the url of your image (that is in your template directory: templates/yourtheme/image.png).
<type> is the way how your image will be rendered.
- normal: image displayed without any crop or resize
- scaled: image displayed to take the whole page. Scaled to the browser window.
- repeatx: image repeated horizontally
- repeaty: image repeated vertically
- repeat: image repeated in both ways (mosaic)
<alignh> contain horizontal alignment (left, center, right)
<alignv> contain vertical alignment (top, center, bottom)
<visible> contain visibility of the image
- both: image displayed everywhere
- home: image displayed on the home screen
- photo: image displayed behind the pictures
Example:
<background>
<color type="hex">000000</color> <!-- background color -->
<images>
<image>
<url type="image_path">img1.png</url>
<type>repeatx</type>
<alignh>left</alignh>
<alignv>top</alignv>
</image>
<image>
<url type="image_path">img2.png</url>
<type>normal</type>
<alignh>right</alignh>
<alignv>top</alignv>
</image>
</images>
</background>
The first node (img1.png) is the background image horizontally repeated.
The second node (img2.png) is the logo that will be displayed in top, right and not be repeated.
With PicsEngine 3.5, the menu is over the background of the gallery. If you want to have something really integrated, you should also edit that part of the interface.
The background image of the menu is in this node:
<pages>
<menu>
<background type="image_path">tabs_background.png</background>
</menu>
</pages>
You only have to paste this node in your template and create a new image.