Use css gradient over background image

Question

I ve been trying to use a linear gradient on top of my background image in order to get a fading effect on the bottom of my background from black to transparent but can t seem to be able to make it show   I ve read other cases here and examples but none of them are working for me  I can only see the gradient or the image but not both of them   Here s the link  Just click on the first logo  ignore that effect  what I m trying is in the body in the whole site after that   This is my css code    x000D   x000D  body   x000D    background  url  http   www skrenta com images stackoverflow jpg   no-repeat  -webkit-gradient linear  left top  left bottom  from rgba 0  0  0  0 1    to rgba 0  0  0  1     x000D    x000D   x000D   x000D

User · Answer

x000D   x000D   multiple-background  x000D   box-sizing  border-box  x000D   width  123px  x000D   height  30px  x000D   font-size  12pt  x000D   border-radius  7px    x000D   background  url  https   cdn0 iconfinder com data icons woocons1 Checkbox 20Full png    linear-gradient to bottom   4ac425   4ac425   x000D   background-repeat  no-repeat  repeat  x000D   background-position  5px center  0px 0px  x000D      background-size  18px 18px  100  100   x000D   color  white   x000D   border  1px solid  e4f6df  x000D   box-shadow   25px  25px  5px  5px black  x000D   padding  3px 10px 0px 5px  x000D   text-align  right  x000D     x000D   lt div id  multiple-background  gt  Completed  lt  div gt  x000D   x000D   x000D

User · Answer

The accepted answer works well  Just for completeness  and since I like it s shortness   I wanted to share how to to it with compass  SCSS SASS    body     colorStart  rgba 0 0 0 0      colorEnd  rgba 0 0 0 0 8      include background-image linear-gradient to bottom   colorStart   colorEnd   url  bg jpg

User · Answer

body       margin  0      padding  0      background  url  img background jpg   repeat     body before       content           width  100       height  100       position  absolute      z-index  -1      top  0      left  0      background  -webkit-radial-gradient top center  ellipse cover  rgba 255 255 255 0 2  0  rgba 0 0 0 0 5  100        PLEASE NOTE  This only using webkit so it will only work in webkit browsers   try    -moz-linear-gradient    Firefox  -ms-linear-gradient    IE  -o-linear-gradient    Opera  -webkit-linear-gradient    Chrome  amp  safari

User · Answer

Ok  I solved it by adding the url for the background image at the end of the line   Here s my working code    x000D   x000D   css   x000D    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  x000D    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  x000D    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  x000D    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  x000D    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  x000D    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  x000D    height  200px  x000D   x000D    x000D   lt div class  css  gt  lt  div gt  x000D   x000D   x000D

[html] Use css gradient over background image

Examples related to html

Examples related to css

Examples related to gradient