Layered Backgrounds with Image/Gradient

[toad78]

Taking advice from here, I’ve attempted to layer a background image with a gradient on the top. Unfortunately, I’m not getting either the background image nor the gradient to appear on the <div class="row presch pad">.

Code:

.presch  {
    background-image:
    linear-gradient(to right, rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%),
    url(../images/backgrounds/preschool-bkgrd-desktop.jpg) no repeat;
    background-image:
    -moz-linear-gradient(left, rgba(30,87,153,0) 0%, rgba(0,0,0,1) 100%),
    url(../images/backgrounds/preschool-bkgrd-desktop.jpg) no repeat;
    background-image:
    -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,0)), color-stop(100%,rgba(0,0,0,1))),
    url(../images/backgrounds/preschool-bkgrd-desktop.jpg) no repeat;
    background-image:
    -o-linear-gradient(left, rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%),
    url(../images/backgrounds/preschool-bkgrd-desktop.jpg) no repeat;
    background-image:
    -ms-linear-gradient(left, rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%),
    url(../images/backgrounds/preschool-bkgrd-desktop.jpg) no repeat;
}

Is the code I’m using not recognizable by the browsers? Looking at Firebug, none of the code being implemented is displaying. Just the ‘.presch {}’.

[toad78]

Okay, I’ve managed to get this to work, except for the gradient. I need the gradient to look like this:

but all I’m seeing is the background color fallback.

[SamA74]

You are using pre-fixes, but where are the versions without the pre-fixes?

[ronpat]

The order of the images is backwards. Try this and see if it is closer:

.presch {
    background-color: #000;
    background-image: linear-gradient(to right, rgba(30, 87, 153, 0) 0%, rgba(0, 0, 0, 1) 100%), url("../images/backgrounds/preschool-bkgrd-desktop.jpg");
    background-position: right top, left top;
    background-repeat: repeat, no-repeat;
    background-size: auto auto, auto 100%;
}

[PaulOB]

@toad78

Okay, I’ve managed to get this to work, except for the gradient.

The gradient is being placed under the image. You need to change the order that you call them as the multiple images get stacked with the first mentioned images being on top.

e.g. Put the gradient before the image.

.presch  {
    background-image: linear-gradient(to right, rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%), url(../images/backgrounds/preschool-bkgrd-desktop.jpg);
}

[toad78]

That seems to help! I’ve also fine-tuned the starting/stopping points to make it appear with a smoother gradient. Thank you, gents!