-1

Is it possible to make background with 3 images and gradient?

I would like to make background where one image will be repeat on whole site and gradient will be added on it. Then second image will be display on right center and the third on left center. Please give me an example of use. Edit: Now I have

background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 69%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.5) 100%), url('images/block.png') repeat 0% 0%, url('images/chef.png') no-repeat 0 0;

Roberto
  • 315
  • 1
  • 5
  • 18
  • It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. – Paulie_D Sep 08 '15 at 14:33
  • It is possible to combine images and gradients, but your question is not clear. – Madalina Taina Sep 08 '15 at 14:34
  • http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients?rq=1 – Madalina Taina Sep 08 '15 at 14:34
  • @MadalinaTaina as i wrote I want more than one image. I will add some code - but it doesn't work anyway that's why I didn't past it. I just want an example to see how make it on my own. I don't want 'finished' code. – Roberto Sep 08 '15 at 14:43

1 Answers1

1

You can search info on Google before asking, but here is your answer:

.multi_bg_example {
    width: 100%;
    height: 500px;
  background-image   : url(/exp.png),
                       url(/exp2.png),
                       linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));

  background-repeat  : no-repeat,
                       no-repeat,
                       no-repeat;

  background-position: bottom right,
                       left,
                       right;
}

http://jsfiddle.net/d1ceayxv/ More info:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

Madalina Taina
  • 1,968
  • 20
  • 26