triniwiz · Oct 24, 2026 · Oct 15, 2026 · Oct 15, 2026
diff --git a/apps/automated/src/ui/styling/style-properties-tests.ts b/apps/automated/src/ui/styling/style-properties-tests.ts
@@ -39,6 +39,10 @@ export function test_setting_backgroundImage_property_from_CSS_is_applied_to_Sty
 	test_property_from_CSS_is_applied_to_style('backgroundImage', 'background-image', "url('~/pages/test2.png')");
 }
 
+export function test_setting_background_none_from_CSS_makes_backgroundColor_transparent() {
+	test_property_from_CSS_is_applied_to_style('backgroundColor', 'background', new Color('transparent'), 'none');
+}
+
 export function test_setting_borderWidth_property_from_CSS_is_applied_to_Style() {
 	test_property_from_CSS_is_applied_to_style('borderWidth', 'border-width', 5, '5', true);
 }

diff --git a/packages/core/css/parser.spec.ts b/packages/core/css/parser.spec.ts
@@ -122,6 +122,9 @@ describe('css', () => {
 						size: { x: { value: 100, unit: 'px' }, y: { value: 100, unit: 'px' } },
 					},
 				});
+				test(parseBackground, 'none', { start: 0, end: 4, value: { image: 'none' } });
+				test(parseBackground, ' #00ff00 none no-repeat ', { start: 0, end: 24, value: { color: new Color('#00ff00'), image: 'none', repeat: 'no-repeat' } });
+				test(parseBackground, 'nonesuch', null);
 				test(parseBackground, '  linear-gradient(to right top) ', {
 					start: 0,
 					end: 32,

diff --git a/packages/core/css/parser.ts b/packages/core/css/parser.ts
@@ -601,6 +601,11 @@ export function parseBackground(text: string, start = 0): Parsed<Background> {
 			end = url.end;
 			continue;
 		}
+		if (keyword && keyword.value.toLowerCase() === 'none') {
+			value.image = 'none';
+			end = keyword.end;
+			continue;
+		}
 		const gradient = parseLinearGradient(text, end);
 		if (gradient) {
 			value.image = gradient.value;

diff --git a/packages/core/ui/styling/style-properties.spec.ts b/packages/core/ui/styling/style-properties.spec.ts
@@ -2,6 +2,8 @@ import { describe, it, expect } from 'vitest';
 
 import { Label } from '../label';
 import { Color } from '../../color';
+import { StackLayout } from '../layouts/stack-layout';
+import { StyleScope } from './style-scope';
 
 describe('border-color shorthand', () => {
 	it('applies a function color with nested arguments to all sides', () => {
@@ -61,3 +63,46 @@ describe('corner-shape', () => {
 		expect(() => (label.style.cornerShape = 'bevel' as any)).toThrow();
 	});
 });
+
+describe('background shorthand', () => {
+	it('none makes the background transparent and removes the image', () => {
+		const label = new Label();
+		label.style.backgroundColor = new Color('red');
+		label.style.backgroundImage = 'res://logo';
+
+		label.style.background = 'none' as any;
+
+		expect(label.style.backgroundColor).toEqual(new Color('transparent'));
+		expect(label.style.backgroundImage).toBeUndefined();
+	});
+
+	it('none applies from CSS', () => {
+		const scope = new StyleScope();
+		scope.css = 'Label { background-color: red; } .reset { background: none; }';
+		const root: any = new StackLayout();
+		root._styleScope = scope;
+		const label: any = new Label();
+		label.className = 'reset';
+		root.addChild(label);
+		label._styleScope = scope;
+		label._cssState.onLoaded();
+
+		expect(label.style.backgroundColor).toEqual(new Color('transparent'));
+	});
+
+	it('none keeps a color given with it', () => {
+		const label = new Label();
+		label.style.background = 'none #00ff00' as any;
+
+		expect(label.style.backgroundColor).toEqual(new Color('#00ff00'));
+		expect(label.style.backgroundImage).toBeUndefined();
+	});
+
+	it('an image without a color still leaves the color unset', () => {
+		const label = new Label();
+		label.style.background = 'url(res://logo) no-repeat' as any;
+
+		expect(label.style.backgroundColor).toBeUndefined();
+		expect(label.style.backgroundImage).toBe('res://logo');
+	});
+});
diff --git a/packages/core/ui/styling/style-properties.ts b/packages/core/ui/styling/style-properties.ts
@@ -132,17 +132,23 @@ function parseBorderColorPositioning(value: string): ShorthandPositioning {
 	return positioningFromParts(splitOnTopLevelSpacesAndCommas(value.trim()), value);
 }
 
+const TRANSPARENT = new Color('transparent');
+
 function convertToBackgrounds(value: string): [CssProperty<any, any> | CssAnimationProperty<any, any>, any][] {
 	if (typeof value === 'string') {
 		const backgrounds = parseBackground(value).value;
 		let backgroundColor = unsetValue;
 		if (backgrounds.color) {
 			backgroundColor = backgrounds.color instanceof Color ? backgrounds.color : new Color(backgrounds.color);
+		} else if (backgrounds.image === 'none') {
+			backgroundColor = TRANSPARENT;
 		}
 
 		let backgroundImage: string | LinearGradient;
 		if (typeof backgrounds.image === 'object' && backgrounds.image) {
 			backgroundImage = LinearGradient.parse(backgrounds.image);
+		} else if (backgrounds.image === 'none') {
+			backgroundImage = unsetValue;
 		} else {
 			backgroundImage = backgrounds.image || unsetValue;
 		}