CODEWITHSUNDEEP
htmlcss
rocco2
rocco2

Reputation: 11

Multiple Backgrounds on Body

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

Upvotes: 1

Views: 816

Answers (2)

Arbel
Arbel

Reputation: 30999

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

Upvotes: 3

Mateusz
Mateusz

Reputation: 3048

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.

Upvotes: 2

Related Questions