Page 60 - CSS

background-image: url(img_1.png), /* top image */
url(img_2.png), /* middle image */
url(img_3.png); /* bottom image */
background-position: right bottom,
left top,
right top;
background-repeat: no-repeat,
repeat,
no-repeat;
}

Images will be stacked atop one another with the first background on top and the last background
in the back. img_1 will be on top, the img_2 and img_3 is on bottom.

We can also use background shorthand property for this:

#mydiv {
background: url(img_1.png) right bottom no-repeat,
url(img_2.png) left top repeat,
url(img_3.png) right top no-repeat;
}

We can also stack images and gradients:

#mydiv {
background: url(image.png) right bottom no-repeat,
linear-gradient(to bottom, #fff 0%,#000 100%);
}

• Demo

The background-origin property

The background-origin property specifies where the background image is positioned.

Note: If the background-attachment property is set to fixed, this property has no effect.

Default value: padding-box

Possible values:

• padding-box - The position is relative to the padding box
• border-box - The position is relative to the border box
• content-box - The position is relative to the content box
• initial
• inherit

CSS

.example {
width: 300px;
border: 20px solid black;
padding: 50px;

https://riptutorial.com/ 38