html - 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, Helvetica, sans-serif;
  text-align: center;
  background: #133e6f url({{ site_img_dir }}/body-bg.gif) repeat-x;
}

This is the normal background image. I want to add another transparent .png over this one which is a non-repeat image. How can this be done ?

Thanks

Answer 1

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