0

I have some shape as a css id, for example:

#triangle-bottomleft { 
   width: 0; 
   height: 0; 
   border-bottom: 100px solid blue; 
   border-right: 100px solid transparent; 
}

I'd like to use it as a repeated-background of text.

<h1 class="myClass">My text.</h1>


.myClass {
    background: triangle-bottomleft;
}

How to deal with it?

wozniaklukasz
  • 161
  • 1
  • 12

1 Answers1

0

EDIT as i just saw you would like to use a class as property. i don't think that is possible by now. neither can u use actual "text" as a background value.

What you could do is use another container containing text as a background position: absolute z-index: -1 container seen here: LINK TO SO

<div id="container">
    <div id="background">
    Text to have as background
    </div>
    Normal contents
</div>
And then the CSS:

#container {
   position: relative;
}

#background {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}

EDIT OVER

If you use SASS you could simply @extend .className inside any other class. doesn't work inside media-queries tho. and furthermore you would need GRUNT to compile your SASS files properly.

@extend

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The most common way of handling this is to use both the more general class and the more specific class in the HTML. For example, suppose we have a design for a normal error and also for a serious error. We might write our markup like so:

taken from here

Community
  • 1
  • 1
Doml The-Bread
  • 1,761
  • 1
  • 11
  • 17
  • I don't get it how SASS is useful over here – Mr. Alien Apr 28 '15 at 12:03
  • edited. wasn't paying attention to the actual question :P thought he would like to use a class inside another class more than once without writing the whole code again. that's where SASS would come to play – Doml The-Bread Apr 28 '15 at 12:07