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
Raul Rodriguez
Courses Plus Student 221 PointsHow to put a text on top of a image with a opacity.
how to do the css
////<div class="container"> <div class"row"> <div class"col-xs-12"> <div id="main-banner"> <div class="Photography"> <figure> <img src="imagen/photography.jpg" alt="Photography" class="img-responsive"> </figure> <figcaption> <h1>Photography</h1> <p>Life is short, we capture the special moments <br> so you can relax and kick it, we got this! </p> <a href="#" class="button btn btn-default">View our work</a> </div> </figcaption </div>
5 Answers
Falk Schwiefert
8,706 PointsYeah, I saw what you need to do.
I updated the fiddle to what you want to do (need to mess some with the positioning but you get the idea). https://jsfiddle.net/7ne0wsby/1/
Honestly, I think it would be easier to create these preview images in an editor and use them fully done instead of messing around with html / css for each one of them. However, if you want to do it in html / css, you basically stack 2 divs on top of each other, put the pic in the outer and the opaque background in the inner.
Falk Schwiefert
8,706 PointsDefine a div in your html and add your text. In the css you select the div, give it height and width and add the image as background-img. Then you stule the text with color: rbga ().
Raul Rodriguez
Courses Plus Student 221 Pointshttp://i65.tinypic.com/dfk1h5.png here is what i trying to do
Raul Rodriguez
Courses Plus Student 221 Pointsi put the image in the html?
Raul Rodriguez
Courses Plus Student 221 Pointshttp://i65.tinypic.com/dfk1h5.png here is what i trying to do
Falk Schwiefert
8,706 PointsI can't see the image you are trying to share but here is an example of wwhat I was explaining above:
Raul Rodriguez
Courses Plus Student 221 Pointshow i can share the image so you can see exactly what i need to do
Raul Rodriguez
Courses Plus Student 221 Points<!-- SERVICES --> <div class="container"> <div class"row"> <div class"col-xs-12"> <div id="main-banner"> <div class="Photography"> <figure> <img src="imagen/photography.jpg" alt="Photography" class="img-responsive"> </figure> <figcaption> <h1>Photography</h1> <p>Life is short, we capture the special moments <br> so you can relax and kick it, we got this! </p> <a href="#" class="button btn btn-default">View our work</a> </div> </figcaption </div>
Here is the result (no good) http://s23.postimg.org/lf7hkpot7/screen.jpg
this is what i need http://s23.postimg.org/oxjhh3pp7/screen2.jpg
Raul Rodriguez
Courses Plus Student 221 Pointshow i can share the image so you can see exactly what i need to do
Raul Rodriguez
Courses Plus Student 221 PointsRaul Rodriguez
Courses Plus Student 221 PointsIf i do that css how you say doesnt matter when i passing the html to wordpress ?