css - Text won't display in Bootstrap Jumbotron w/ image -
i trying add background image twitter bootstrap jumbotron class.
i using bootstrap3.
i tried alpha'd text , did not restrict image jumbotron:
.jumbotron:after { background: url("img/island.png") repeat scroll center center transparent; bottom: 0; content: ""; display: block; left: 0; opacity: 0.4; position: absolute; right: 0; top: 0; }
here html:
<!-- main jumbotron primary marketing message or call action --> <div class="jumbotron"> <div class="container"> <h1>hello, world!</h1> <p>this template simple marketing or informational website.</p> <p><a class="btn btn-primary btn-lg">learn more »</a></p> </div> </div>
this got me 90% of way text not show:
<link href="css/bootstrap.css" rel="stylesheet"> <style type="text/css"> .jumbotron { position: relative; z-index: 3; } .jumbotron:after { background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)), url('img/carousel_island.png'); bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; z-index: 2; } </style>
you should relatively position .jumbotron
class pseudo-element relative it; if there no ancestor element positioned relatively, absolutely positioned elements relative viewport.
try adding:
.jumbotron { position: relative; }
Comments
Post a Comment