CSS Background with both gradient and pattern image

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;

Can you put together a simplified jsfiddle?

Adrift
– Adrift

2013-09-23 17:42:14 +00:00
Commented Sep 23, 2013 at 17:42 — Adrift
– Adrift, Commented Sep 23, 2013 at 17:42

Community · Accepted Answer · 2017-05-23 12:05:14Z

0

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/

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Sep 23, 2013 at 17:41

blackeyebeefhorsefly

1,9441 gold badge15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

guenis Over a year ago

i have seen this solution before and now retried it with background-repeat:repeat. idk why but it worked thanks.

Collectives™ on Stack Overflow

CSS Background with both gradient and pattern image

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related