How to add background image and gradient background

Question

how do i add a background image to a gradient background in css. here my code

input.button-add {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #ffffff;
    padding: 4px 4px;
    background: -moz-linear-gradient(
        top,
        #ff2819 0%,
        #ff0d0d);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#ff2819),
        to(#ff0d0d));
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ffffff;
    -moz-box-shadow:
        0px 1px 1px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.7);
    -webkit-box-shadow:
        0px 1px 1px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.7);
    box-shadow:
        0px 1px 1px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.7);

is it possible and if its possible how?

"Is it possible?" Why don't you tell us? Did your solution work? Why didn't it work the way you expected it to? What is the actual outcome of your solution? What did you expect to happen? — Patrick, Nov 05 '14 at 10:55

score 0 · Answer 1 · answered Nov 05 '14 at 11:09

Why not? Just add as many background-images as you want (gradients are also images) by separating them with commas. Also, specify background-position and background-repeat for all of them.

Here is your code with one image background and one gradient background:

input.button-add {
    color: #ffffff;
    padding: 4px 4px;
    border: 1px solid #ffffff; border-radius: 5px;
    display: inline-block;
    width: 120px; height: 64px;
    box-shadow: 0px 1px 1px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 0.7);

    background-image: 
        url('http://lorempixel.com/16/16'),
        -webkit-gradient(linear, left top, left bottom, from(#ff2819), to(#fff));
    
    background-position: 4px center, center center;
    background-repeat: no-repeat, no-repeat;

}

<input id="btn" type="button" value="Click Here" class="button-add" />

Add the standard `linear-gradient` instead of the `-webkit` prefix. For more ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds — Abhitalks, Nov 05 '14 at 11:45

How to add background image and gradient background

1 Answers1