0

I'm trying to fit everything under a background-image declaration so that my background-repeats work. My code is this, but the background ends up being white.

body {
height: 100%;
background-image:
    url("../img/bgpattern.png"),
    -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 83%, rgba(0,0,0,1) 100%),
    -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(14%, rgba(0,0,0,0)), color-stop(83%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,1))),
    -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 83%, rgba(0,0,0,1) 100%),
    -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 83%, rgba(0,0,0,1) 100%),
    -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 83%, rgba(0,0,0,1) 100%),
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 83%, rgba(0,0,0,1) 100%),
    progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 ),
    url("../img/bg.jpg");

background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;

}

Sosa
  • 814
  • 1
  • 9
  • 20
  • 1
    if i understand what youre trying to do there are at least a couple examples of it here (particularly Tamás Pap's answer, add both images on each line, separate with comma) http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients and check out the 2nd example here.. http://www.w3schools.com/css/css3_backgrounds.asp – Hastig Zusammenstellen Jan 19 '16 at 06:24
  • Yes that answer from Tamás Pap is exactly what i'm looking for. I went and used Compass with SASS to do it, thanks. – Sosa Jan 19 '16 at 08:46

0 Answers0