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
Brady Jones
13,119 PointsHi, im working on my portfolio site, it's another site template im editing. Theres a few issues Im having...
I want to add a transparent tint behind my <h2> and <p> text. Not sure how to do it. Here is my code:
<h2 class="section-title font-alt align-left mb-50 mb-sm-40" style="color: white;"> About Me </h2>
and
<p " style="color: white;"> I have 1 year Front-End Dev freelance experience. Coming from a Graphic Design background I know how to create exterior beauty and my Front-End Dev freelance work has aided me in producing aesthetically pleasing and well-functioned sites. I have a real passion for design and love analyzing the details. Away from the laptop I enjoy watching series/movies, reading and working out. </p>
Thanks in advance ;-) Brady
3 Answers
Brady Jones
13,119 PointsGreat thanks! How would I then shorten the background so that it doesn't cross the entire page, just covers the h2 text? I've tried using percentages, ems, pixels on the background size property to no success..
Thanks
Vijay Ramdass
13,275 PointsHey, you would need to adjust the size of your margin to set the height and width you would like.
<h2 class="section-title font-alt align-left mb-50 mb-sm-40" style="background: rgba(255, 255, 255, 0.5); margin: 50px 50px;"> About Me </h2>
Of course you can adjust the variables to you liking.
Brady Jones
13,119 PointsI'll show you what I mean.
Screen Shot 2017-01-20 at 12.04.34.png
Brady Jones
13,119 PointsIve just taken a screenshot, how can I send it to you?
Vijay Ramdass
13,275 PointsVijay Ramdass
13,275 PointsHello, instead of using color and then naming the value, I would use RGBA (Red, Green, Blue, Alpha). The alpha would be the variable to adjust your transparency with 0.0 being fully transparent and 1.0 being fully opaque. You should also use background as color sets the color of text. Your code should look like this:
<h2 class="section-title font-alt align-left mb-50 mb-sm-40" style="background: rgba(255, 255, 255, 0.5);"> About Me </h2>If there are better ways to do this please chime in, as I am a beginner myself.