.foo {
	background: url("images/green.png");
}

.bar {
	background: url(imports/green.png);
}

.url-modifier {
	background: url("images/green.png" something);
}

.fragment {
	background: url("images/green.png#foo");
	background: url("#foo");
}

.search {
	background: url("images/green.png?foo=bar");
}

.leading_slash {
	background: url("/test/images/green.png");
}

.full_url {
	background: url("https://example.com/images/green.png");
}

.unknown_protocol {
	background: url("foo://example.com/images/green.png");
}

.node_modules_protocol {
	background: url("node_modules://images/green.png");
}

@property --background-image--strictly-typed {
	syntax: '<url> | none';
	inherits: true;
	initial-value: none;
}

@property --background-image--loosely-typed {
	syntax: '*';
	inherits: true;
	initial-value: none;
}

@property --background-image--strictly-typed-with-initial-value {
	syntax: '<url> | none';
	inherits: true;
	initial-value: url('./green.png#initial');
}

.box {
	--background-image--strictly-typed: url(imports/green.png#1);
	--background-image--loosely-typed: url(./green.png#2);
	--background-image--untyped: url(./green.png#3);
	--background-image--strictly-typed-with-initial-value: url(imports/green.png#4);
}

.root {
	background: url(images/green.png);
}

.outside_root {
	background: url("../../../images/green.png");
}
