Backgrounds
background image:
.demo {
width: 100px;
height: 100px;
background-image: url("https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg");
}Every image has a certain height, and width at the time of creation.
You can set an image as background of a box. Now your HTML Box may or may not be of similar W, H as of the image.
Aspect Ratio:
the ratio of width to height (width:height OR width/height)
Eg: 16:9, 3:2 etc.
background size:
.demo {
width: 100px;
height: 100px;
background-image: url("https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg");
background-size: auto; /*width height */;
}It takes width and height in percentage or below keywords:
- auto - image is added to the box without any changes to its W, H,
- cover - image is stretched or cropped to cover the box,
- contain - image is resized (the AR is preserved) to fit in the box,
D.I.Y
background repeat:
.demo {
width: 100px;
height: 100px;
background-image: url("https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg");
background-size: auto; /*width height */;
background-repeat: no-repeat; /*horizontal vertical */;
}D.I.Y
It takes 2 value for horizontal and vertical:
-
repeat- image repeats to fill the box -
no-repeat- doesn't repeat -
round- stretches or crops image to fill box -
space- evenly repeats image to fill box, never crops/stretches
background position:
.demo {
width: 100px;
height: 100px;
background-image: url("https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg");
background-size: auto; /*width height */;
background-repeat: no-repeat; /*horizontal vertical */;
background-position: top left; /*x-axis y-axis */;
}It takes 2 value for x-axis and y-axis:
- x-axis - left, right, center, %age
- y-axis - top, bottom, center, %age
The order wouldn't matter if keywords (left, top) are used.
background attachment:
.demo {
width: 100px;
height: 100px;
background-image: url("https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg");
background-size: auto; /*width height */;
background-repeat: no-repeat; /*horizontal vertical */;
background-position: top left; /*x-axis y-axis */;
background-attachment: scroll;
}D.I.Y
It takes 3 value for x-axis and y-axis:
- x-axis - left, right, center, %age
- y-axis - top, bottom, center, %age
The order wouldn't matter if keywords (left, top) are used.
background origin:
.demo {
width: 100px;
height: 100px;
background-image: url("https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg");
background-size: auto; /*width height */;
background-repeat: no-repeat; /*horizontal vertical */;
background-position: top left; /*x-axis y-axis */;
background-attachment: scroll;
background-origin: padding-box;
}It takes 3 values:
- padding-box- the background is applied till padding.
- border-box- the background is applied till border.
- content-box - the background is applied till content area.
background clip:
D.I.Y
background clip:
.demo {
width: 100px;
height: 100px;
background-image: url("https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg");
background-size: auto; /*width height */;
background-repeat: no-repeat; /*horizontal vertical */;
background-position: top left; /*x-axis y-axis */;
background-attachment: scroll;
background-clip: padding-box;
}It takes 3 values:
- padding-box- the background is clipped till padding.
- border-box- the background is clipped till border.
- content-box - the background is clipped till content area.
- text - the background is clipped till text.
D.I.Y
Complex background image:
#demoBox {
aspect-ratio: 1/1;
border: 0.5px solid hsla(0deg, 0%, 60%, 0.5);
width: 100%;
border: 1px solid hsla(0deg, 0%, 40%, 0.25);
padding: 1rem;
background-image:
url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
url("https://assets.codepen.io/7518/blob.svg"),
linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
background-size: contain, cover, auto;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 50% 50%, 10% 50%;
background-origin: padding-box, border-box, content-box;
/* background:
* url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box,
* url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box,
* linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ; */
}
CSS: Backgrounds
By Yash Priyam
