1
Mein Hintergrundbild kann nicht reagieren, ich versuche diesen Code auf meiner anderen Seite und es funktioniert, aber wenn ich diesen Code anwenden. Der Hintergrund wird nicht im Vollbildmodus angezeigt, wenn der Bildschirm minimiert wird. Hier ist das die HTML-Hintergrundbild kann nicht reagieren
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Cookie">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/material-icons.css">
<link rel="stylesheet" href="css/landing-page.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header"><a class="navbar-brand navbar-link"
href="#"><strong>Hello</strong>'s Builder</a>
<button class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-
bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
</div>
</div>
</nav>
<!-- End of Navigation -->
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h2>Build Your Website</h2>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<a href="grapesjs/grapesjs.php" class="btn btn-default btn-lg">Get Started</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
und hier ist meine CSS:
body,
html {
width: 100%;
height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
/* NAVIGATION BAR */
nav.navbar.navbar-inverse{
border-radius:0px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav >
.active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus{
background-color:#dbe1f4;
}
.navbar-brand{
transform:translateX(-50%);
left:50%;
position:absolute;
}
/* INTRO */
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url(../image/intro-bg.jpg);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center center;
background-attachment: fixed;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message > h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.intro-message > h3 {
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
@media(max-width:500px) {
.intro-header{
background-size:cover;
min-width: 500px;
background-position:center center;
background-attachment: fixed;
}
.intro-message {
padding-bottom: 15%;
}
.intro-message > h1 {
font-size: 3em;
}
ul.intro-social-buttons > li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.intro-social-buttons > li:last-child {
margin-bottom: 0;
}
.intro-divider {
width: 100%;
}
}
es darunter immer weißer Raum ist. Ich weiß nicht, was ist falsch weil es mit meinem anderen Hintergrund arbeitete
Warum nicht die ganze Zeit mit 'background-size: cover' arbeiten? – lumio
Ich tat zuerst, aber änderte nichts, so dass ich suchte und legte alle anderen Sachen, aber immer noch nicht geändert –
Nur aktualisierte Antwort. –