Visual Guide to Backgrounds

• Related Topics:
• Create your own Background
• Screen Background
• Label Background
• Visual Guide
• Visual Guide to Borders
• Visual Guide to Text Effects
• Visual Guide to Item Views
• Visual Guide to Screen Transitions
• GUI Concepts
• CSS Basics
• Customization

This guide shows you backgrounds that you can use for all Items and Screens. You can apply every background using the CSS background attribute:

.myScreen {
	background {
		type: horizontal-stripes;
		first-top-color: brightBgColor;
		second-top-color: white;
		first-bottom-color: blue;
		second-bottom-color: black;	
	}
}

When you want to use the same background for several items or screens, you should define the background within the backgrounds section of your resources/polish.css file, so that only one instance of the background is being used. This is also true if you inherit screen styles like in the following example:

backgrounds {
	defaultScreenBackground {
		type: horizontal-stripes;
		first-top-color: brightBgColor;
		second-top-color: white;
		first-bottom-color: blue;
		second-bottom-color: black;			
	}
}
.myScreen {
	background: defaultScreenBackground;
}

.myOtherScreen extends myScreen {
	margin-left: 10;
	margin-right: 10;
	repaint-previous-screen: true;
}

For adjusting a background to a screen, please refer to the Screen Background documentation.

For including an Item's label into the background, please refer to the Label documentation.

Last but not least you can also realize your own background with J2ME Polish!

circle Background

The circle background displays a circle or an ellipse background.

combined Background

Mix different backgrounds together using the combined background.

diagonal-gradient Background

The diagonal-gradient background displays a background with a smooth gradient running from the top-left to the bottom-right corner.

fade-in Background

Fade in a background on MIDP 2.0 handsets with the fade-in background.

gif89a Background

(video follows)

The gif89a background displays an animated GIF image on devices with MMAPI support.

horizontal-gradient Background

The horizontal-gradient background displays an horizontal gradient in the background.

horizontal-round-rect-split Background

The horizontal-round-rect-split background displays horizontally split background with rounded corners.

horizontal-split Background

The horizontal-split background displays horizontally split background.

horizontal-stripes Background

The horizontal-stripes background displays horizontal stripes in the background.

image Background

The image background displays an image in the background.

mask Background

Mask an existing background and add transparency using a mask background.

opening Background

Increase the size of the background each time a new item is selected with the opening background.

opening-round-rect Background

Increase the height of a round-rect background when the corresponding item is shown with the opening-round-rect background.

partial Background

The partial background fills a part of the background.

partial-gradient Background

The partial-gradient background displays a gradient in a part of the background.

polygon Background

The polygon background renders a filled polygon.

pulsating Background

Use a background that changes its color with the pulsating background.

pulsating-circle Background

Use a breathing circular background with the pulsating-circle background.

pulsating-circles Background

Paint several ever growing circles with the pulsating-circles background.

pulsating-round-rect Background

Use a rounded corner background that changes its color with the pulsating-round-rect background.

radial-gradient Background

The radial-gradient background displays an circular gradient in the background.

round-rect Background

The round-rect background displays a monocolored background with rounded corners.

round-rect-split Background

The round-rect-split background paints a rounded cornered background with two vertical aligned colors.

round-tab Background

The round-tab background displays a background with rounded corners at the top.

round-tab-bordered Background

The round-tab-bordered background displays a background with rounded corners at the top and a border.

scaling-image Background

The scaling-image background scales images automatically to the required size.

simple Background

The simple background displays a monocolored and possibly translucent background.

snowflakes Background

Express winter feelings with the snowflakes background.

split Background

The split background paints a background in two vertical aligned colors.

text Background

The text background paints text in the background.

vertical-gradient Background

The vertical-gradient background displays an gradient in the background.

video Background

(video follows)

The video background displays a video on the background.

web20 Background

The web20 background displays a rounded corner background with an inner circular background.

Your Own Background

Create Your Own Background