html - Text on div border with transparent background -


how put text on border div text has transparent background matches image behind?

the problem background-image has shapes , multiple colors, can't put background color the text because won't fit.

example:

html,  body {    width: 100%;    height: 100%;  }  body {    margin: 0;    background: url(http://wallpoper.com/images/00/45/05/47/green-background-2_00450547.jpg);  }  #main {    margin-top: 100px;    -webkit-border-radius: 20px;    -moz-border-radius: 20px;    border-radius: 20px;    border: 1px solid #000000;  }  #main h2 {    font-size: 60px;    font-weight: 700;    text-align: center;    margin: -40px 0 0;    background: transparent; /* somehow remove border behind text */    padding: 0 20px;  }
<div id="main">    <h2>star players</h2>    <ul>      <li>foo</li>      <li>bar</li>    </ul>  </div>


jsfiddle

you can use fieldset instead of div:

html:

<fieldset>     <legend>test</legend> </fieldset> 

css:

legend {     text-align: center;     width: 100%; } 

Comments

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -