CODEWITHSUNDEEP
htmlcss
holian
holian

Reputation: 755

Multiple background images in one div

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 combine these images as the background of my tag?

Upvotes: 14

Views: 55439

Answers (4)

MCSI
MCSI

Reputation: 2904

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

Upvotes: 25

zima
zima

Reputation: 1

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.

Upvotes: 0

Oliver
Oliver

Reputation: 1530

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

Upvotes: 3

laymanje
laymanje

Reputation: 833

It is only possible with css3 for modern browsers. 

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

Upvotes: 0

Related Questions