Comment mettre du texte sur une image

Question

Je suis en train d'écrire du texte sur une image avec le CSS et HTML ci-dessous, mais il ne fonctionne pas ..

CSS

.social_media_head{ 
background: url(newsletter_image.gif) no-repeat center; 
position: relative; 
right: -9px; 
height: 0; 
width: 325px; 
padding: 30px 0 0 5px;  
} 

.media_name h2{ 
position: relative; 
top: 2px; 
} 

.media_name { 
position: relative; 
top: 2px; 
} 

HTML

<div class="social_media_head"> 
    <h2 class="media_name">Social Media</h2> 
    </div> 

Exemple jsfiddle

Mise à jour Je suis vraiment désolé si l'image à laquelle je fais référence est fausse. L'image sur laquelle je veux mettre du texte est l'image sur les icônes des médias sociaux (facebook, twitter, youtube) ... c'est-à-dire. Image à l'intérieur de class = "social_media_head".

Encore une fois, je suis désolé pour la confussion.

Answer 1

vous pouvez le faire en mettant z-index de texte supérieur à l'image et la position absolue

.text{ 
z-index:101; 
position:absolute; 
/set the position of text you want 
} 

.image{ 
z-index:100; 
} 

et au texte image ci-dessus

.media_name h2 devrait être h2.media_name

h2.media_name { 
    color: red; 
    margin-top: -30px; 

    top: 2px; 
} 

full screen Result et fiddle

Answer 2

Fonctionne pour moi (simplifié): http://jsbin.com/uqazel/1/

Peut-être que vous devez définir un height approprié.

Answer 3

Effectuez les opérations suivantes pour éviter H-tags, et pour la boîte pour régler la hauteur de l'image est en ligne plutôt que comme arrière-plan: (see code here http://jsfiddle.net/jySZB/1/)

(en raison de mettre à jour, l'ancien code est enlevé et gardé dans le lien ci-dessus - voir le nouveau lien et le code ci-dessous) -

MISE à JOUR: si « sur une image » signifie au-dessus plutôt que sur le dessus (qui font plus de sens dans ce cas), essayez ce code à la place:

http://jsfiddle.net/jySZB/2/

HTML:

<div class="social_media_head"> 
    <div>Social Media</div> 
    <img src="http://satcomng.com/types/twitter.png" alt="" /> 
    <img src="http://satcomng.com/types/twitter.png" alt="" /> 
    <img src="http://satcomng.com/types/twitter.png" alt="" /> 
</d 

CSS:

.social_media_head { 
    display:block; 
} 
.social_media_head div { 
    color:red; 
    font-size:26px; 
    font-weight:bold; 
    font-family:sans-serif; 
    clear:both; 
} 

Résultat:

Conseil: les images sont en ligne ici, ils sont faciles à convertir en liens cliquable aller sur les sites sociaux (j'ai utilisé une seule image par exemple).