html - How do I create background image and add text over it -


to start very new bootstrap wanted similar example:text on background image inside of bootstrap framework. have tried creating div inside container below navbar seems put white background behind text covering image behind... can see code here: jsfiddle: my code. or follows:

css

body { margin-top: 50px; /* required margin .navbar-fixed-top. remove if using .navbar-static-top. change if height of navigation changes. */ }  @import url(http://fonts.googleapis.com/css?family=oswald:700);  html {  background: url(http://3.bp.blogspot.com/_6r-moi0ouo0/s6q3vodcqi/aaaaaaaab5a/uycl8dcr92a/s1600/nyc15brooklynbridge02.jpg) no-repeat center center fixed;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: 'oswald', sans-serif; }  h1 { color: #fff; text-align: center; font-size: 120px; text-transform: uppercase; }  span { font-size: 130px; color: transparent; text-shadow: 0 0 10px #fff; } 

html

<head>  <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="">  <title>full - start bootstrap template</title>  <!-- bootstrap core css --> <link href="css/bootstrap.min.css" rel="stylesheet">  <!-- custom css --> <link href="css/full.css" rel="stylesheet">  <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]>     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->  <style type="text/css">     @import url(http://fonts.googleapis.com/css?family=oswald:700);   h1 { color: #ff6600; text-align: center; font-size: 120px; text-transform: uppercase; }  span { font-size: 130px; color: transparent; text-shadow: 0 0 10px #ff6600; } </style>  </head>  <body> <!-- navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container">     <!-- brand , toggle grouped better mobile display -->     <div class="navbar-header">         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">             <span class="sr-only">toggle navigation</span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>         </button>         <a class="navbar-brand" href="#">start bootstrap</a>     </div>     <!-- collect nav links, forms, , other content toggling -->     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">         <ul class="nav navbar-nav">             <li>                 <a href="#">about</a>             </li>             <li>                 <a href="#">services</a>             </li>             <li>                 <a href="#">contact</a>             </li>         </ul>     </div>     <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav>  <div class="container"> <h1>   <span>some text</span><br>some other text </h1> </div> <!-- jquery --> <script src="js/jquery.js"></script>  <!-- bootstrap core javascript --> <script src="js/bootstrap.min.js"></script>  </body>  </html> 

just add body { background: none; }. fiddle


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -