Multiple Backgrounds on Body

Question

Not sure if this is possible but can i put one transparent image over the standard background image on the website.

    body {
  font-family: Arial, Helvetic         


        

Answer 1

Just add another url after a coma and it should work.

background: url('/images/body-bg.gif'), url('/images/anotherImage.png');
background-repeat: repeat-x;

You can find more info here.

UPDATE

You can find working example here, on jsfiddle. Sorry for the images, random gif and png from google.

Answer 2

To have Multiple Backgrounds on a Single Element:

.myclass {
  background: background1, background2, ..., backgroundN;
}

More complex example:
3 backgrounds with other background properties:
Note1: You can define background-repeat and background-position (and others like background-size) properties for each of the 3 backgrounds individually.

.multi_bg_example {
  /* Background 1, an image   */ background: url(img1),
  /* Background 2, a gradient */ linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
  /* Background 3, an image   */ url(img3);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}

Note2: The first one appears on top, second one below it, etc...

Source: Mozilla Developer Network, CSS multiple backgrounds:
http://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_multiple_backgrounds