J2ME Polish
J2ME Polish 2.4 Documentation
Enough Software

Combined Background

You can combine any backgrounds and nest backgrounds using the combined background.

Design Samples


The above background has been realized with the following design settings:

backgrounds {
	titleForeground {
		type: polygon;
		points: 10,50 50,10 90,50 50,90;
		color: #00f;
		scale-mode: proportional;
		anchor: right | vcenter;
	}
	titleBackground {
		type: combined;
		foreground: titlePolygonLeft;
		background: titleGradient;
	}
	titlePolygonLeft {
		type: polygon;
		points: 10,50 50,10 90,50 50,90;
		color: #00f;
		scale-mode: proportional;
		anchor: left | vcenter;
	}
	titleGradient {
		type: vertical-gradient;
		top-color: white;
		bottom-color: blue;
	}
}

title {
	padding: 2;
	margin-top: 0;
	margin-bottom: 5;
	margin-left: 0;
	margin-right: 0;
	font-face: proportional;
	font-size: large;
	font-style: bold;
	font-color: brightFontColor;
	border: none;
	layout: horizontal-center | horizontal-expand;
	background {
		type: combined;
		foreground: titleForeground;
		background: titleBackground;
	}
}

You can also combine animated backgrounds as shown in this example:


The above animation has been realized with the following settings:

backgrounds {
	skyline {
		image: url( skyline.png );
		anchor: bottom;
	}
	snow {
		type: combined;
		foreground: snowflakes;
		background: gradient;
	}
	snowflakes {
		type: snowflakes;
		color: transparent;
		flake-color: white;
		max-flake-size: 12;
		number-of-flakes: 15;		
	}
	gradient {
		type: vertical-gradient;
		top-color: black;
		bottom-color: red;
	}
}

.myItem {
	background {
		type: combined;
		foreground: skyline;
		background: snow;
}

This example adds some text to a background:
The text background combined with round-rect-split one.

backgrounds {
	titleText {
		type: text;
		text: step 1 / 3;
		text-style: titleTextStyle;
		anchor: top | right;
		color: transparent;
		x-offset: -7;
		y-offset: 0;
	}
	titleBg {
		type: round-rect-split;
		top-color: #073b46;
		bottom-color: #042931;
		split-pos: 50%;
		arc-width: 8;
		arc-height: 8;
	}
}
.titleTextStyle {
	always-include: true;
	layout: right;
	font-size: small;
	font-color: white;
	text-effect: shadow;
}
title {
	margin: 2;
	padding: 2;
	padding-top: 12;
	padding-bottom: 12;
	padding-right: 8;
	font-face: proportional;
	font-size: large;
	font-style: bold;
	font-color: #fff;
	layout: right | expand;
	text-effect: split;
	text-split-bottom-color: #ddd;
	background {
		type: combined;
		foreground: titleText;
		background: titleBg;
	}
}

horizontal-round-rect-split background
The above title design has been realized by combining a horizontal-round-rect-split with a circle background:

backgrounds {
	titleCircle {
		type: circle;
		color: red;
		diameter: 80%;
		anchor: right | vcenter;
		x-offset: -5;
	}
	titleBg {
		type: horizontal-round-rect-split;
		left-color: #f00;
		right-color: #ccc;
		split-pos: 75%;
		arc-width: 8;
		arc-height: 8;		
	}
}
title {
	margin: 2;
	padding: 2;
	padding-top: 12;
	padding-bottom: 12;
	padding-left: 12;
	padding-right: 8;
	font-face: proportional;
	font-size: large;
	font-style: bold;
	font-color: #ccc;
	background {
		type: combined;
		foreground: titleCircle;
		background: titleBg;
	}
	layout: left | expand;	
}

CSS Attributes

Use these CSS attributes for creating a combined background:

CSS Attribute  DefaultValuesExplanation
foregroundn/abackground name in the backgrounds section The background in the foreground - reference a background name from the backgrounds section.
backgroundn/abackground name in the backgrounds section The background in the background - reference a background name from the backgrounds section.

JavaDoc

CombinedBackground.

back to top