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

CSS

Nicholas Thorne
Nicholas Thorne
1,160 Points
Posted by Nicholas Thorne
Nicholas Thorne
1,160 Points

Inverse background masks

Hi,

I'm trying to cut text and images out of their backgrounds in order that the page background image can be soon through "holes" in the background.

html:

<h1><span>NICK THORNE DESIGN</span></h1>

I would like the text to be transparent so the background of the body can be seen through.

I have experimented using the below

css:

h1 {
    background-color: rgba(8, 8, 8, 0.7);
    padding: 5px 10px;
}

span {
    background: url(...);
    color: transparent;
    webkit-background-cut: text;
}

However, because h1 is central on the page, I cannot get the background for the span to match the position of the page's background.

I have searched the internet a lot and cannot find a solution so this may not yet be possible.

Any help would be amazing

2 Answers

Katherine Duncan-Welke
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Katherine Duncan-Welke
iOS Development with Swift Techdegree Graduate 33,030 Points
Katherine Duncan-Welke
.a{fill-rule:evenodd;}techdegree seal-36
Katherine Duncan-Welke
iOS Development with Swift Techdegree Graduate 33,030 Points

Hi there,

I don't understand precisely what you're trying to achieve, but you might be able to use opacity to achieve a similar effect. Opacity ranges from 0.0 (invisible) to 1.0 (opaque), so choosing a low opacity for your text will allow the background to show through partly. It tends to look particularly good if you use white as the text colour, but anything will work. You might want to try opacity: 0.5, and then adjust the number based upon the result. This may or may not be what you want, but I hope it might help!

Nicholas Thorne
Nicholas Thorne
1,160 Points
Nicholas Thorne
Nicholas Thorne
1,160 Points

Hi Katherine,

Think of it as 3 layers, a background image, then the background to the text element, then the text on top. When you change the opacity of the text, there is still the background to the text element in the way of seeing the background image. I essentially want to achieve a stencil effect where the text is cut out of the background to the text element so the background image can be seen through.

http://css-tricks.com/image-under-text/

That is the closest method I've found