Gradient CSS with Background IMG

Question

so im trying to figure out how to get IMG have a gradient layer on top of it, and it is not showing up correctly!

It either shows gradient or shows image, but not both at the same time.

CSS im using

#grad1 {
height: 200px;
background: url(images/back3.gif), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
background: url(images/back3.gif), -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: url(images/back3.gif), -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: url(images/back3.gif), linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */

}

html code im using

<div id="grad1"></div>

Can anyone help, im lost with this!

Answer 1

You need to put image url after the gradient, like so

#grad1 {
height: 200px;
background: rgba(255,0,0,1)), url(images/back3.gif); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)), url(http://lorempixel.com/600/800/sports/Dummy-Text/); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)), url(http://lorempixel.com/600/800/sports/Dummy-Text/); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)), url(http://lorempixel.com/600/800/sports/Dummy-Text/); /* Standard syntax (must be last) */

See in JSFiddle

Answer 2

You are going to want to do this:

How do I combine a background-image and CSS3 gradient on the same element?

Use background-image instead.