In CSS, you can add multiple backgrounds to an element using the background
property.
Example:
background: background1, background2, ..., backgroundN;
Each background can be specified using the background-image
, background-position
, background-size
, background-repeat
, background-origin
, and background-clip
properties.
For example, let’s say you want to add two backgrounds to an element: a solid color and an image.
Example:
background: #fff url('background-image.jpg') no-repeat top right;
This will set the first background to a solid white color, and the second background to the background-image.jpg
file. The image will be positioned at the top-right corner of the element and will not repeat.
You can add as many backgrounds as you want, separated by commas.
Example:
background: #fff url('background-image1.jpg') no-repeat top right, url('background-image2.jpg') repeat center center;
This will set the first background to a solid white color and the background-image1.jpg
file. The image will be positioned at the top-right corner of the element and will not repeat. The second background will be the background-image2.jpg
file, positioned at the center of the element and repeating horizontally and vertically.