Multiple background images in one div

Question

I made a ribbon in Photoshop. The ribbon has three part. The left and right parts are a fixed 10px. The middle sectoin is a repeatable pattern.

Is it possible to com

Answer 1

It is only possible with css3 for modern browsers.

.element{
    background-image: url(key.png), url(stone.png);
}

Answer 2

Just add a class to the tag, then using CSS add the background to that class. This will not work on IE8 or earlier

div
{ 
background:url(smiley.gif) top left no-repeat,
url(sqorange.gif) bottom left no-repeat,
url(sqgreen.gif) bottom right no-repeat;
}

Code is from http://www.w3schools.com/cssref/css3_pr_background.asp

To get it to work in other versions of IE you can use something like CSS3Pie http://css3pie.com/documentation/supported-css3-features/#pie-background However I would test thoroughly before putting the code live

Answer 3

Although not all browsers support it, but it is possible with CSS3. It should look like this:

#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

You can see other examples here.

Answer 4

As @j08691 pointed out, this is only possible in CSS3

#your-selector {
  background-image: url(one.png), url(two.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
  width: 300px;
  height: 350px;
}

See tutorial