Multiple images in one style

Is it possible to show multiple images in one style? How to do this.

Generally, we show only one images within one style, eg:

.style {
    background-image: url(image.gif) 0 0;
}

Code (markup):

Perhaps:

.style {
    background-image: url(image1.gif) 0 0;
    background-image: url(image2.gif) 0 50px;
}

Code (markup):

Need help please... Thanks a bunch...

Gud lak

 

no, that's not possible... I know 'cause I already tried it hehehe

 

Thanks for sharing. Have any idea to show multiple images? Thanks

 

merge the 2 images to create a single image? and make that image as the background...

 

use two elements and set a background for each one:

<style type="text/css">
h1 { background: url(image1.gif) 0 0;}
span { background: url(image2.gif) 0 50px;}
</style>

<span><h1>blah blah</h1></span>

Code (markup):

 

That's going to be possible... The syntax is actually like this:

background-image: url(firstImage.jpg), url(secondImage.jpg);
background-position: top left, top right;

As long as 100% of your users browser with Safari, then you'll have no problem

 

How about FF or IE?

 

Nope, multiple css backgrounds is a CSS3 proposal, so it won't work in either of those.

What specifically are you trying to accomplish? There might be a way to do it with CSS2.

 

In my adsense beautifier, I merged four images to create a single image. Is it possible to show four images instead merge them? I think it would be easier to create random images with these images. Need help please. Thanks a bunch…

Have a great day

 

sorry bub...not possible with just CSS. You'll need a bit of html help there. You could create separate divs and nest them, ie

div id=1
div id=2
div id=3
div id=4
**content**
/div
/div
/div
/div

and style your elements accordingly

 

Yes, I agree. Perhaps use this method:
div id=main
div id=1
/div
div id=2
/div
div id=3
/div
div id=4
/div
div id=text
Bla bla bla
/div
/div

style 1 { background-image: url(image1.gif) 0 0;}
style 2 { background-image: url(image2.gif) 0 50;}
style 3 { background-image: url(image3.gif) 0 100;}
style 4 { background-image: url(image4.gif) 0 150;}
style main { width: 400px;}
style text {padding: 2px; float:right;}

How about it? Or it would be better with merge 4 images to one image? Thanks a bunch...

 

you could do your method if you want, but it will be harder, and less correct. With my method, each div is a container of the subsequent divs, meaning you don't have to worry about floating or absolutely placing images, just lining up bg images, since they're stacked on one another. the container method is more correct because each div has something in it, vs your method where you're using divs for nothing but excess imagery

 

Okey. I will try this. Many thanks for your help...