Using background image over gradient

Question

What I am trying to achieve is that I have gradient on the div background, and I am trying to add a background image over the gradient(image is just a pattern) but either only gradient is being applied or only the pattern, not both I get a white background with this code:

 #box{
    padding:50px;
    background:linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0% transparent url('bs-docs-masthead-pattern.png') repeat scroll center center transparent;
    }

only gradient with this:

#box{
background:linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0% 
}
 #box:after{
 background: transparent url('pattern.png') repeat scroll center center transparent;
}

what m I doing wrong?

Multiple background images, need to be comma separated and the stacking order is important. - http://css-tricks.com/snippets/css/multiple-backgrounds-syntax/ — Paulie_D, Nov 03 '14 at 11:18
Possible duplicate of [How do I combine a background-image and CSS3 gradient on the same element?](https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element) — Colin R. Turner, Mar 27 '18 at 22:22

score 0 · Answer 1 · answered Nov 03 '14 at 11:23

Update your CSS like below.

 #box{
  background:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSXwTmM2R_vmBHFpn720_8bGOaegnP5Kawh0wb4JggN5rUALGwGvw') no-repeat center center, linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0%;
  height:500px;
   }

FIDDLE DEMO

Vitorino fernandes · Answer 2 · 2014-11-03T16:52:22.900

0

add content:"" in pseudo element

* {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
    }
    #box {
      background: linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0%;
      width: 100%;
      height: 100%;
    }
    #box::after {
      content: "";
      background: url('http://s28.postimg.org/rfznph7ul/pattern.png');
      width: 100%;
      height: 100%;
      display: block;
    }

<div id="box"></div>

edited Nov 03 '14 at 16:52

answered Nov 03 '14 at 11:35

Vitorino fernandes

15,794
3
20
39

Nope it's not working... Here's the link to my image, can you please give it a shot (It's really bugging me now), also the thing you said about adding `content:""` why do we need to do this? Link: https://www.dropbox.com/s/iexuzlqujo5bnlb/pattern.png?dl=0 – Nov 03 '14 at 15:42
updated the snippet you image is working please check my answer @azazelroman – Vitorino fernandes Nov 03 '14 at 16:53
Yes it is working :) just one quick question can this be done without styling the `html and body`? I mean i only have to apply on the div so... actually i am using bootstrap framework and adding style to body might mess up. – Nov 03 '14 at 17:27
i have just added it so the div takes full height :) there is no need if you are using a framework – Vitorino fernandes Nov 04 '14 at 03:22
without styles for `body` and `html` [demo](http://jsfiddle.net/victor_007/kvoygcas/1/) – Vitorino fernandes Nov 04 '14 at 11:34

Using background image over gradient

2 Answers2