Hilfe! Bild einfügen

[Krobbus]

Ich habe folgenden Code, der eine Box auf auf meiner Internetseite darstellt:
1. Css datei:

#subcontent{
float:right;
width:170px;
padding:20px 20px 10px 0;
line-height:1.4em;
}

.small{font-size:0.8em;}

.box{
margin:0 0 20px 0;
padding:10px;
border:1px solid #c0c0c0;
background-color:#fafbfc;
color:#505050;
line-height:1.5em;
}

2. Html datei:

<div id="subcontent">
<div class="small box">Blablabla
</div>

Wie mache ich es, das in der Box ein bild dargestellt wird? Das Bild sollte mittig in der Box dargestellt werden (also gleicher Abstand zum linken boxrand wie zum rechten)

1000 Dank im voraus
Ich habe eine sehr unsaubere lösungen ausprobiert, aber war nciht zufrieden.

 

[lukiB]

Hallo,
soll das bild als Hintergrund dienen?
wenn ja, schreibe einfach in deinen CSS code

background-image: url(bild.png);

Mfg lukiB

 

[Krobbus]

hi luki,
nein das bild soll nciht als hintergrund dienen, es soll dort einfach ganz normal eingefügt sein. (mit img src... geht das ja irgendwie nicht so richtig)

 

[Efchen]

Der Vorschlag von lukiB kachelt das Image aber und zentriert es nicht. Korrektur muss es heißen:

background:url(bild.png) no-repeat center center;

Das ist aber nur zu empfehlen, wenn das Image nur Beiwerk ist. Handelt es sich um Inhalt, nutzt man das <img>-Tag. Den Sinn, ein Image in ein Block-Element reinzupressen, sehe ich derzeit nicht, aber man kann ja z.B. auch dem Image einen Rahmen geben und mit margin oder padding entsprechende Effekte erzielen. Das Image (als Inline-Element) in einem Block-Element zu zentrieren, geht mit text-align:center;

Aber für eine konkrete Lösung müssen wir die Anwendung kennen.

mit img src... geht das ja irgendwie nicht so richtig

Das bedeutet...was?

Gruß,
-Efchen