5
ich eine Seite erstellen möchten, wo ich wie Endomodo's site nur ein div Vollbild mit einem Hintergrundbild mit Bootstrap habenWie ein div fullscreen mit einem bakcground Bild machen mit Bootstrap
Da ich Bootstrap gerade beginnen heruntergeladen ich einige Proben auf startboostrap website und versuchte zu verwalten, was ich will. Mein Problem ist, dass das Menü und der Inhalt auf der Seite angezeigt werden, aber mein div nicht (und so das Bild). Meine HTML/CSS:
body {
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
.full {
background: url(bg3.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.header-image {
display: block;
width: 100%;
text-align: center;
background: url('http://placehold.it/1900x500') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.headline {
padding: 120px 0;
}
.headline h1 {
font-size: 130px;
background: #fff;
background: rgba(255,255,255,0.9);
}
.headline h2 {
font-size: 77px;
background: #fff;
background: rgba(255,255,255,0.9);
}
.featurette-divider {
margin: 80px 0;
}
.featurette {
overflow: hidden;
}
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
.featurette-heading {
font-size: 50px;
}
footer {
margin: 50px 0;
}
@media(max-width:1200px) {
.headline h1 {
font-size: 140px;
}
.headline h2 {
font-size: 63px;
}
.featurette-divider {
margin: 50px 0;
}
.featurette-image.pull-left {
margin-right: 20px;
}
.featurette-image.pull-right {
margin-left: 20px;
}
.featurette-heading {
font-size: 35px;
}
}
@media(max-width:991px) {
.headline h1 {
font-size: 105px;
}
.headline h2 {
font-size: 50px;
}
.featurette-divider {
margin: 40px 0;
}
.featurette-image {
max-width: 50%;
}
.featurette-image.pull-left {
margin-right: 10px;
}
.featurette-image.pull-right {
margin-left: 10px;
}
.featurette-heading {
font-size: 30px;
}
}
@media(max-width:768px) {
.container {
margin: 0 15px;
}
.featurette-divider {
margin: 40px 0;
}
.featurette-heading {
font-size: 25px;
}
}
@media(max-width:668px) {
.headline h1 {
font-size: 70px;
}
.headline h2 {
font-size: 32px;
}
.featurette-divider {
margin: 30px 0;
}
}
@media(max-width:640px) {
.headline {
padding: 75px 0 25px 0;
}
.headline h1 {
font-size: 60px;
}
.headline h2 {
font-size: 30px;
}
}
@media(max-width:375px) {
.featurette-divider {
margin: 10px 0;
}
.featurette-image {
max-width: 100%;
}
.featurette-image.pull-left {
margin-right: 0;
margin-bottom: 10px;
}
.featurette-image.pull-right {
margin-bottom: 10px;
margin-left: 0;
}
}<!DOCTYPE html>
<html lang="en">
<!-- Make sure the <html> tag is set to the .full CSS class. Change the background image in the full.css file. -->
<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>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the 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]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for 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 the nav links, forms, and other content for 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="full">
</div>
<!-- Page Content -->
<div class="container">
<hr class="featurette-divider">
<!-- First Featurette -->
<div class="featurette" id="about">
<img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
<h2 class="featurette-heading">This First Heading
<span class="text-muted">Will Catch Your Eye</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Second Featurette -->
<div class="featurette" id="services">
<img class="featurette-image img-circle img-responsive pull-left" src="http://placehold.it/500x500">
<h2 class="featurette-heading">The Second Heading
<span class="text-muted">Is Pretty Cool Too.</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Third Featurette -->
<div class="featurette" id="contact">
<img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
<h2 class="featurette-heading">The Third Heading
<span class="text-muted">Will Seal the Deal.</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Schwer zu sagen, was Sie sich wünschen. Sie können einfach ein Hintergrundbild auf ein Div anwenden und es wird wie Endomodos Website aussehen - http://codepen.io/anon/pen/MKqdKj. Hinweis: Sie wenden eine Höhe auf das Div an, so dass es die Größe des Browser-Ansichtsfensters ist, die in JavaScript erstellt würde. – unpollo
Ich habe es bereits überprüft, es passt nicht mit Bootstrap. Ich versuche, eine reaktionsfähige Ansicht zu erhalten – Habchi