background image with color overlay gradient css
Copy . css {
background: - moz- linear- gradient (top, rgba (0 , 0 , 0 , 0 ) 0 %, rgba (0 , 0 , 0 , 0 ) 59 %, rgba (0 , 0 , 0 , 0.65 ) 100 %), url ('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a' ) no- repeat;
background: - webkit- gradient (linear, left top, left bottom, color- stop (0 %, rgba (0 , 0 , 0 , 0 )), color- stop (59 %, rgba (0 , 0 , 0 , 0 )), color- stop (100 %, rgba (0 , 0 , 0 , 0.65 ))), url ('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a' ) no- repeat;
background: - webkit- linear- gradient (top, rgba (0 , 0 , 0 , 0 ) 0 %, rgba (0 , 0 , 0 , 0 ) 59 %, rgba (0 , 0 , 0 , 0.65 ) 100 %), url ('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a' ) no- repeat;
background: - o- linear- gradient (top, rgba (0 , 0 , 0 , 0 ) 0 %, rgba (0 , 0 , 0 , 0 ) 59 %, rgba (0 , 0 , 0 , 0.65 ) 100 %), url ('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a' ) no- repeat;
background: - ms- linear- gradient (top, rgba (0 , 0 , 0 , 0 ) 0 %, rgba (0 , 0 , 0 , 0 ) 59 %, rgba (0 , 0 , 0 , 0.65 ) 100 %), url ('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a' ) no- repeat;
background: linear- gradient (to bottom, rgba (0 , 0 , 0 , 0 ) 0 %, rgba (0 , 0 , 0 , 0 ) 59 %, rgba (0 , 0 , 0 , 0.65 ) 100 %), url ('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a' ) no- repeat;
height: 200px;
}