CODEWITHSUNDEEP
htmlcssimage
Dotunn Nnnn
Dotunn Nnnn

Reputation: 163

How to put text on an image

I'm trying to write text over an image with the CSS and HTML below but it's not working..

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>

Example jsfiddle

Update I'm very sorry if the image I'm referring to is wrong. The image I want to put text on is the image on top of the social media icons (facebook, twitter, youtube)...i.e. Image inside class = "social_media_head".

Once again I'm sorry for the confussion.

Upvotes: 1

Views: 465

Answers (3)

user1693593
user1693593

Reputation:

Try the following to avoid H-tags, and for the box to adjust for height the image is inline rather than as background: (see code here http://jsfiddle.net/jySZB/1/)

(due to update, the old code is removed and kept in the link above - see new link and code below) -

UPDATE: if "over an image" means above rather than on top (which do make more sense in this case), try this code instead:

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;
}

Result:

result 2

Tip: as the images are inline here they are easy to convert to click-able links to go the the social sites (I used only one image for example).

Upvotes: 1

NullPoiиteя
NullPoiиteя

Reputation: 57312

you can do this by setting z-index of text higher than image and position absolute 

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

.image{
z-index:100;
}

and to text above image

.media_name h2 should be h2.media_name

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

    top: 2px;
}

full screen Result and fiddle

Upvotes: 1

Patrick Oscity
Patrick Oscity

Reputation: 54674

Works for me (simplified): http://jsbin.com/uqazel/1/

Maybe you need to set an appropriate height.

Upvotes: 0

Related Questions