Background Image

Set background images with position, size, origin and other styles.

Usage:

@bg img-*;
@bg img-origin-*;
@bg img-position-*;
@bg img-repeat-*;
@bg img-size-*;

danger

Gradient color also uses background-image property.

So, if you are using @bg gradient-*; then conflict will be created. You need to choose a stratagey to work with both.

info

This page contains only the property configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		bg: {
			img: {
				DEFAULT: {
					property: "background-image: <v><i>;",
					values: {
						none: "none",
					},
				},

				origin: {
					property: "background-origin: <v><i>;",
					values: {
						border: "border-box",
						padding: "padding-box",
						content: "content-box",
					},
				},

				position: {
					DEFAULT: {
						property: "background-position: <v><i>;",
						values: {
							// background-position: x [spacing] [y] [spacing];
							center: "center",
							right: "right",
							left: "left",
							top: {
								DEFAULT: "top",
								left: "left top",
								right: "right top",
							},
							bottom: {
								DEFAULT: "bottom",
								left: "left bottom",
								right: "right bottom",
							},
						},
					},

					x: {
						property: "background-position-x: <v><i>;",
						values: {
							// background-position-x: v [spacing];
						},
					},

					y: {
						property: "background-position-y: <v><i>;",
						values: {
							// background-position-y: v [spacing];
						},
					},
				},

				repeat: {
					property: "background-repeat: <v><i>;",
					values: {
						// background-repeat: v | x y;
						DEFAULT: "repeat",
						none: "no-repeat",
						x: "repeat-x",
						y: "repeat-y",
						space: "space",
						round: "round",
					},
				},

				size: {
					property: "background-size: <v><i>;",
					resolve: "spacing",
					themeKey: "spacing",
					values: {
						// background-size: v | x y;
						auto: "auto",
						contain: "contain",
						cover: "cover",
					},
				},
			},
		},
	},
};

export default shilpConfig;