Multiple background colors, images in css [duplicate] - html

Question

This question already has answers here:
Can I apply multiple background colors with CSS3?
(6 answers)
Closed 7 years ago.
How can I give a single div multiple background colors or images in CSS? For example, I want the top part to be red, then the middle to be blue and the bottom to be green.

Answer 1

A single linear-gradient as a background is enough
background: linear-gradient(to bottom,
red 0, red 33.33%,
blue 0, blue 66.66%,
green 0, green 100%
);
Example | Browser support

Answer 2

use gradients in css3.
YourDIVID {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green); /* Standard syntax */
}

Answer 3

TOP, BOTTOM, CENTER multiple color Tutorial For Sigle Line
#multiple {
width: 700px;
height: 500px;
background:linear-gradient(red, yellow, green, blue, purple, orange);
}

Answer 4

Use :before and :after pseudo element rules to have three different background layers (color and images) on a single element.
Note: This solution requires the contained elements to be wrapped to stay above the backgrounds. Otherwise links may not be clickable, text not selectable, etc..
Run the code snippet for a working example.
.layered-backgrounds {
background-color: #C63;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
height: 400px;
z-index: 1;
}
.layered-backgrounds:before {
position: absolute;
content: " ";
top: 0;
height: 120px;
width: 100%;
background: #39C;
z-index: 2;
opacity: 0.8;
}
.layered-backgrounds:after {
position: absolute;
content: " ";
bottom: 0;
height: 120px;
width: 100%;
background: #9C3;
z-index: 3;
opacity: 0.8;
}
.layered-backgrounds .content {
position: relative;
z-index: 4;
}
<div class="layered-backgrounds">
<div class="content">
Clickable and selectable contents.
</div>
</div>