text over images in html css

Question

i am trying to put text over image it works but is there a better way to do it. should i use a different html tag for the text. any suggestions

http://jsfiddle.net/8rDda/

 body{ background-color:#F0F0F0 ; color:#000305; font-size: 87.5%; font-family: Arial,'Lucida Sans Unicode'; line-height: 1.5; text-align: left; width:80%; margin:2% auto; } .main { width:45%; height:300px; background-color: #20b2aa; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .main img{ width:80%; height:auto; margin: 6% 10%; float: left; } .main h2 { color:white; position: absolute; margin:50px; margin-left: 50px; width: 100%; }

Nothing wrong with it, you can use p, h1 or h2, it's alright — Ali Gajani
– Ali Gajani, Commented May 24, 2014 at 17:31
I would put the image as a background to a div. Then you wouldn't have to use position:absolute to position the text. — Vucko
– Vucko, Commented May 24, 2014 at 17:32
There are many ways to the put text over image. you can use :after and :before pseudo element. but finally up to you. what's is your project requirement. — Kheema Pandey
– Kheema Pandey, Commented May 24, 2014 at 17:35

Alex VII · Accepted Answer · 2014-05-24 17:35:38Z

Maybe one solution could be, that you set the image as background-image for your div. And edit the test in it. So you jut have a single div, which you must edit.

http://jsfiddle.net/QX36R/1/

chovy · Accepted Answer · 2014-05-24 17:36:02Z

http://jsfiddle.net/8rDda/1/

I would use absolute positioning instead of float.

.main { width:45%; height:300px; background-color: #20b2aa; border-radius: 5px; position: relative; //keep children absolutely position constrained to this element. -moz-border-radius: 5px; -webkit-border-radius: 5px; } .main h2 { color:white; position: absolute; margin: 6% 10%; top: 0; left: 0; }

Philipp Braun · Accepted Answer · 2014-05-24 17:34:11Z

You could also use z-index and different divs. But at last you need position:absolute; with different positions or margin-top: -whatever with position:relative;. There is not really a right or wrong approach to do this. As long as it works on your site, it is all fine.

Shashank · Accepted Answer · 2014-05-24 17:37:20Z

You can use <div> tag means creating one div and put it on the top of image or set any position or else link it with another div which will be your image. There are plenty of things you can do with <div> tag. Example.

<div style="abcd"> top: 99; left: 99; position: absolute; z-index: 1; visibility: show;"> <!-- content will go here --> </div>

Collectives™ on Stack Overflow

text over images in html css

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related