CODEWITHSUNDEEP
htmlcss
Mia
Mia

Reputation: 6531

Fixed position background-clip for text

Is it possible to keep background-clipped image (in a text) at fixed location?

You can see an example here http://codepen.io/anon/pen/WQzpWQ

css:

.text {
  background: url(http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-tree-blossoms-bench-1-1000x666.jpg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

As you see, the background-clip works however for every text it's a new image. What ı like to do instead is a single background image (fullscreen) that will be seen through the text background-clip's as we scroll down.

Looking for a solution

Upvotes: 4

Views: 1915

Answers (2)

Drowsy
Drowsy

Reputation: 21

Your .text class should look like this one:

.text {
  background: url(http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-tree-blossoms-bench-1-1000x666.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Upvotes: 2

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

Try this out, I've added some extra attributes to the background property to achieve the full-screen effect and set the background-size to cover - 

.text{
    background: url(http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-tree-blossoms-bench-1-1000x666.jpg) fixed center center no-repeat;
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

CodePen Example

Edit

If you want a teardown of all the added values inside the background, here what it would look like by setting those with defined attribute names.

.text{
    background: url(http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-tree-blossoms-bench-1-1000x666.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Upvotes: 4

Related Questions