0

Just like the Title says, "How to use text as a background instead of an image?"

I'm making a little application, that I personally think is cool but will probably be a waste of peoples time, and am altering the button in the drop down button to an upside down triangle using this html code ▼ . I'm not talking about setting the z-index or anything just simply placing a character for the little arrow. I thought about leaving it blank but I don't think users would understand that they are supposed to use the menu if I did so. Therefore I'm going to use the upside down triangle.

My CSS for the drop-down list is set up like this

select {
 border: none;
 overflow: hidden;
 background: no-repeat right #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
dened
  • 4,253
  • 18
  • 34
XRipperxMetalX
  • 135
  • 2
  • 9
  • possible duplicate of [Is there a way to use use text as the background with CSS?](http://stackoverflow.com/questions/1191464/is-there-a-way-to-use-use-text-as-the-background-with-css) – Ciro Santilli OurBigBook.com Aug 27 '14 at 20:40

2 Answers2

2

Put the text inside an HTML tag with class .text-background, set CSS styles to

.text-background {
    position: absolute;
    z-index: 1;
}

and set z-index to the elements you want to be on top of the text with z-index higher than 1.

edit:

If you know what the size of the select element is, you probably want to position that text over the dropdown. This however will block the button.

JSFiddle

If you want better looks and functionality you can use a 3rd party libraries such as this or this.

edit 2: I just found this CSS only solution given by Danield that's probably going to suite your needs better.

https://stackoverflow.com/a/13968900/1419575

Community
  • 1
  • 1
Georgi Demirev
  • 446
  • 3
  • 22
  • It's to replace the drop down button in the select tag. So Wouldn't I have to position the right way which would change from screen resolutions? – XRipperxMetalX May 30 '14 at 05:30
  • I could just use an image but I'm not to fond of using graphics on the web page. I prefer to just mark everything up – XRipperxMetalX May 30 '14 at 05:32
  • I'm not completely sure what you want to do here, can you submit a jsfiddle demo so I can give you more accurate answer. If you want to put the text over an HTML form (such as a dropdown menu) you can actually position it absolutely over the menu. – Georgi Demirev May 30 '14 at 05:36
0

Try This, as suggested by Paulo Bergantino:

JS Fiddle Click Here

HTML

<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>

CSS

#container{
position: relative;
}
#background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
Community
  • 1
  • 1
Arijit Mukherjee
  • 3,817
  • 2
  • 31
  • 51
  • I know what you guys are saying but this is for the drop down list for the – XRipperxMetalX May 30 '14 at 05:36
  • check this fiddle if you want anything like this? http://jsfiddle.net/r9Dyq/2/ or if you can explain a bit more. – Arijit Mukherjee May 30 '14 at 05:41
  • 2
    I really don't like how you're copy/pasteing answers without using proper source. – Georgi Demirev May 30 '14 at 05:45