Answers for "background multicolor css"

gradient image css

#show_bg_2 {
 
background-image:
  /*two color gradient over an image*/
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), 
rgba(117, 19, 93, 0.73)),url('images/background.jpg');
 
width: 80%;
height: 400px;
background-size: cover;
}

multiple color background

body{
/* Its, very important to set the background repeat to: no-repeat */
background-repeat:no-repeat; 

background-image:  
/* 1) An image              */ url(http://lorempixel.com/640/100/nature/John3-16/), 
/* 2) Gradient              */ linear-gradient(to right, RGB(0, 0, 0), RGB(255, 255, 255)), 
/* 3) Color(using gradient) */ linear-gradient(to right, RGB(110, 175, 233), RGB(110, 175, 233));

background-position:
/* 1) Image position        */ 0 0, 
/* 2) Gradient position     */ 0 100px,
/* 3) Color position        */ 0 130px;

background-size:  
/* 1) Image size            */ 640px 100px,
/* 2) Gradient size         */ 100% 30px, 
/* 3) Color size            */ 100% 30px;
}

css multicolor background

background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);

linear gradient in CSS

The general syntax of linear-gradient is-
background: linear-gradient(gradient direction, color1 , color2 , color3, .....);

Forexample-
background: linear-gradient(46deg,green,blue,yellow,pink);

NOTE: (common mistake) we forget to write the semi-colon (;)