Backgrounds in CSS
background:
<background-color>?
/* OR */
<background-image>
<background-position> / <background-size>?
<background-repeat>
<background-attachment>
<background-origin>
<background-clip>
Everything in HTML is a Box. So every CSS rule is applied to a box.
.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.
.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:
D.I.Y
.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 boxno-repeat
- doesn't repeatround
- stretches or crops image to fill boxspace
- evenly repeats image to fill box, never crops/stretches.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:
The order wouldn't matter if keywords (left, top) are used.
.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:
The order wouldn't matter if keywords (left, top) are used.
.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:
D.I.Y
.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:
D.I.Y
#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 ; */
}
Box Model In CSS: Margin, Border, Padding & Content
box-sizing:
.demo {
width: 100px;
height: 100px;
border: 1px solid red;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
/* margin shorthand */
margin: 5px 5px 5px 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
/* padding shorthand */
padding: 5px 5px 5px 5px;
}
D.I.Y
the width is applied on inline side - block flow,
the height is applied on block side - inline flow