adding images in css

[Violet_82]

hi all, is it possible to add more than an image in the css?
I mean if the syntax goes:

background-image:url('paper.gif');
background-color:#cccccc;

How do I add more than 1 image?
thanks

[dany12]

You can add images with html and then style them with css this is the easiest way

[Violet_82]

dany12, thanks but yes I know that, but I am specifically asking if I can have tow images added with css. To put things in contest, here's my current html:

<div class="social_media"><a href="https://www.facebook.com/andychristodrums"><img id="facebook_image" src="http://andys.antonioborrillo.co.uk/wp/wp-content/themes/twentyeleven/images/FaceBook_48x48.png" alt="" /></a><a href="https://twitter.com/#!/AndyChristo1"><img id="twitter_image" src="http://andys.antonioborrillo.co.uk/wp/wp-content/themes/twentyeleven/images/Twitter_48x48.png" alt="" /></a></div>
<!-- end of social_media -->

Now, if I do something like

...
    background-image:url(http://andys.antonioborrillo.co.uk/wp/wp-content/themes/twentyeleven/images/FaceBook_48x48.png), url(http://andys.antonioborrillo.co.uk/wp/wp-content/themes/twentyeleven/images/Twitter_48x48.png);
...

would that work the same? If so, how do I then make those images as links in the css?
thanks

[JorgeM]

That is not going to work. In your example, each anchor element has an image for the text portion of the link. If you wanted to control the images via CSS, it would have to be done in a manner such as this..for example..

CSS

a#span1 {background-image:url('image1.jpg')}
a#span2 {background-image:url('image2.jpg')}
a#span3 {background-image:url('image3.jpg')}

HTML

<a href="#"><span id="span1"></span></a>
<a href="#"><span id="span2"></span></a>
<a href="#"><span id="span3"></span></a>

However, if you want to save some bandwidth so that multiple images do not have to be downloaded, you may want to use CSS Sprites. Just do a Search for "CSS Sprites". The use of sprites allows you to have one image file that has all of your pics in one image and you use CSS to show only portions of the image to each element. The idea behind a sprite is that you conserve quite a bit of bandwidth and time when your web visitor downloads one file rather than multiple files from the web server.

[Violet_82]

thanks JorgeM. I have used sprites before, the reason why I haven't used them this time is because the number of social media icons I will use is not definitive as yet, so I don't want to create multiple versions of the sprite. Besides, it might not be easy to assign a link to each single imgage of the sprite off the top of my head.

When I asked about the css, perhaps naively, I thought there was a way to do the all thing just using css, so that if I had to increment the number of socil media icons I had to update only the css and not the html. In my current solution, which is t the toop of the thread, I have a div and then the images and links associated with them. This works fine, the only trouble with it is that if I want to add another icon, I have to update both css and html. I like your first solution, I really didn't think about that, but the problem still stands, in that, if I am to add another icon I still need to update both css and html.
I think I will leave it as it is then, but thanks for posting your code, it is useful