CODEWITHSUNDEEP
css
Joemon
Joemon

Reputation: 793

Multiple background images using css3 and sprites

Is there any way to apply multiple background images using sprites? something like the below code?

background-image: url("../images/button-sprite.gif"),url("../images/button-sprite.gif");
background-position: right -92px, 0px 0px ;
background-repeat: no-repeat;
font-size: 1em;
margin-right: 5px;
padding-right: 35px;
width:500px;
height:500px

Upvotes: 4

Views: 3096

Answers (3)

Suresh Pattu
Suresh Pattu

Reputation: 6209

You can have multiple background images

see the EXAMPLE

Here is my css:

.sprite_box
{
        background: 
        url(http://i.imgur.com/On0lt.png) -162px -551px no-repeat,
        url(http://i.imgur.com/On0lt.png) -200px -530px no-repeat,        
        transparent;     
        height: 24px;    
        width: 81px;
        margin:5px;
}​

Read about sprite here

Here you can create sprite image

Here you create css for your sprite image

Upvotes: 3

methodofaction
methodofaction

Reputation: 72405

Yes, you can. The shorthand method is less verbose:

.sprite {
  background: 
    url(http://www.google.com/images/srpr/nav_logo41.png) 0 -243px no-repeat,
    url(http://www.google.com/images/srpr/nav_logo41.png) 42px -93px no-repeat,
    #ccc;
  width: 160px;
}

Note that you can only state one background color, and you state it at the end of the declaration.

See it in aciton http://jsfiddle.net/TMHPh/

Upvotes: 2

Cole
Cole

Reputation: 21

Yes, you can have multiple background images, but it is limited to box items. There is some info on this at CSS3.info

Upvotes: 2

Related Questions