CSS Background with both gradient and pattern image - html

Question

I'm trying to make my website's background to have gradient and a repeating pattern image. The gradient works fine as below, but if I remove background-repeat: no-repeat; the gradient doesn't stretch and repeats every few lines. I want to add another pattern image over the gradient but it needs to repeat so conflicts with the gradient.
I thought I can fix it by adding a div which contains the pattern image and stretches all over the body but it was unsuccessful. Is there any way to fix this problem?
body {
...
background-repeat: no-repeat;
background-attachment: fixed;
background-image: linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgb(255,255,255)),
color-stop(0.53, rgb(171,205,139)),
color-stop(0.77, rgb(171,205,139))
);}
And this is how I'm trying to repeat pattern image
background-image:url('mypattern.png');
background-repeat:repeat;

Answer 1

It seems like you will most likely need to create two elements one positioned absolutely over the other. There is a similar question here on stackoverflow dealing with this issue
LINK
CSS gradient above background pattern
EDIT
something like this may work
.example3 {
background-image: url(../images/plus.png), -moz-linear-gradient(top, #cbe3ba, #a6cc8b);
background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
}
LINK
http://www.heresonesolution.com/2010/09/using-a-css-gradient-and-a-background-image-on-the-same-element/