html - Text on div border with transparent background -
this question has answer here:
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>
you can use fieldset instead of div:
html:
<fieldset> <legend>test</legend> </fieldset>
css:
legend { text-align: center; width: 100%; }
Comments
Post a Comment