Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <title>Full Page Image Background Template for Bootstrap 3</title>
- <!-- Bootstrap core CSS -->
- <link href="css/bootstrap.css" rel="stylesheet">
- <!-- Custom CSS for the 'Full' Template -->
- <link href="css/full.css" rel="stylesheet">
- <!--Displays the Navigation Bar Style-->
- <div class="navbar navbar-default navbar-fixed-top">
- <!--Displays the Navigation Bar Content-->
- <div class="navbar-header">
- <!-- displays the icon bar in responsive view; when clicked reveals a list-->
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
- <!-- displays the icon bars in responsive view;-->
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <!--Brand, Logo of your website-->
- <a class="navbar-brand" href="#">Virtual Productionz, Inc.</a>
- </div>
- <!-- Allows collapse/show navbar in responsive view-->
- <div class="navbar-collapse collapse navbar-responsive-collapse">
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">About Us</a></li>
- <!-- Dropdown menu-->
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Integrated Laser Keyboard</a></li>
- <li><a href="#">More...</a></li>
- </ul>
- </li>
- <li><a href="#">Contact Us</a></li>
- </ul>
- </div>
- </div>
- <div class="jumbotron">
- <h1>Welcome!</h1>
- <p>We're an awesome company that creates virtual things for portable devices.</p>
- <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
- </div>
- <!-- JavaScript -->
- <script src="js/jquery-1.10.2.js"></script>
- <script src="js/bootstrap.js"></script>
- @import url("bootstrap.min.css");
- @import url("bootstrap-theme.css");
- body {
- margin-top: 50px; /* 50px is the height of the navbar - change this if the navbarn height changes */
- }
- .full {
- /*background: url(http://placehold.it/1920x1080) no-repeat center center fixed;*/
- background: url("../images/laser_keyboard.jpg") no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
- }
- .jumbotron{
- color: #FFFFFF;
- /*background-color:none !important;*/
- }
- <div style="background:transparent !important" class="jumbotron">
- <h1>Welcome!</h1>
- <p>We're an awesome company that creates virtual things for portable devices.</p>
- <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement