Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by Tomy BITON
Tomy BITON
1,768 Points

How To Overlay Text On Top Of Image

I have a photo a created on photoshop I am having troubling coding to replicate it. It is an image with text overlay . I am using Wordpress and no matter how hard I try I cannot get it to work. Any help would be appreciated. /Users/tomerbiton/Documents/feather.gif

2 Answers

Richard Feinburg
Richard Feinburg
2,970 Points
Richard Feinburg
Richard Feinburg
2,970 Points

Here is a link to how one way it can be done. http://cssdeck.com/labs/sisnus6a

div { width: 500px; height: 100px; overflow:hidden; margin: 50px auto; border-radius: 200px; z-index: 9; position: relative; }
div img { width: 100%; position: relative; top: -50%; }
div span {
  z-index: 10;
  text-align: center;
  color: black;
  font-size: 20px;
  position: relative;
}

<div>
  <span>The Sky is Blue!</span>
  <img src="http://www.fabiovisentin.com/photography/photo/25/sky-and-clouds-dsc00224.jpg" alt=""/>
</div>
Jeremy Germenis
Jeremy Germenis
29,854 Points
Jeremy Germenis
Jeremy Germenis
29,854 Points

You could also give the text container a position:absolute + z-index:10 and then use margin to move the container over the image.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

You don't need a z-index of 10, a z-index 2 will work if you only have 2 layers.

Jeremy Germenis
Jeremy Germenis
29,854 Points
Jeremy Germenis
Jeremy Germenis
29,854 Points

I have a habit of using multiples of 10 in case another element needs to be introduced into the mix at a later time.