Bootstrap 4: Hintergrundbild skalieren und Div Boxen unterschiedlich Groß

    Hi,
    ich bin neu hier und auch neu im Bereich HTML/CSS.
    Aktuell beschäftige ich mich mit Bootstrap und habe zwei Probleme.


    1. Ich habe eine Div Klasse, welche ein Background - Image lädt. Jedoch wird dies nicht vollständig dargestellt.
    In der Bootstrap Doku habe ich nur den Eintrag gefunden: http://v4-alpha.getbootstrap.com/content/images/ jedoch bringt dieser mir nichts für den Background (so verstehe ich es jedenfalls)


    2. Meine div Boxen sind warum auch immer unterschiedlich groß. Ich habe "container-fluid" verwendet.


    vorab schonmal Dank!
    Grundsätzlich wären ein paar Worte noch von euch cool ob das so "sauber" ist oder ob ich mir direkt einen schlechten Stil angewöhne.


    [Blockierte Grafik: http://www0.xup.in/exec/ximg.php?fid=17528229] 

    Hinweis: Ich verwende eine eigene CSS und die bootstrap.css (alpha 6)


    CSS
    1. h1, h2, h3, h4, h5, h6 { margin: 0 0 35px; font-weight: 700; letter-spacing: 1px;}hr { margin-top: -20px; margin-bottom: 20px; margin-left: 650px; margin-right: 650px; border: 0; border-top: 1px solid #eee;}.intro {background: url(/img/antwhite.jpg) no-repeat; background-size: cover; height:100%;}.intro-welcome { text-align: center; margin-left: -15px; margin-right: -15px;}.intro-text { font-size: 26px}.about { text-align: center; color: #FFFFFF; background-color: #2C3E50; margin-left: -15px; margin-right: -15px;}.about-text { font-size: 26px;}.contact { text-align: center; color: #FFFFFF; background-color: #008000; margin-left: -15px; margin-right: -15px;}.contact-text { font-size: 26px;}.service { text-align: center; color: #FFFFFF; background-color: #008000; margin-left: -15px; margin-right: -15px;}.step1-text {font-size: 20px;}.glyphicon { border: 2px solid #FFFFFF; border-radius: 50%; display: inline-block; font-size: 60px; height: 140px; line-height: 140px; text-align: center; vertical-align: middle; width: 140px;}.reference { text-align: center; color: #FFFFFF; background-color: #bababa; margin-left: -15px; margin-right: -15px;}.footer { padding: 50px; text-align: center; color: #FFFFFF; background-color: #000000; margin-left: -15px; margin-right: -15px;}


    HTML
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta http-equiv="x-ua-compatible" content="ie=edge">
    2. <!-- Bootstrap CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    3. <!-- WebAmeise CSS --><link rel="stylesheet" type="text/css" href="css/webameise.css">
    4. <title>WebAmeise - eCommerce</title>
    5. </head><body><!-- Navigation --><div class="intro"><div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <nav class="navbar navbar-toggleable-md navbar-light"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""> </a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Menüpunkt 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menüpunkt 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menüpunkt 3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menüpunkt 4</a> </li> </ul> </div> </nav> </div> </div>
    6. <!-- Navigation --><!-- Intro Seite --><div class="intro-welcome"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h1>Lalalala</h1> <p class="intro-text">lallaallala lalalalal lalallalalal lalaalla lalala</p> </div> </div></div></div><!-- Intro Seite --><!-- About --><div class="about"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h1>Über lalalal</h1> <p class="about-text">lallaallala lalalalal lalallalalal lalaalla lalala <br> lallaallala lalalalal lalallalalal lalaalla lalala&reg; System.</p> </div> </div></div><!-- About --><!-- Service --><div class="service"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h1>Service</h1> <hr> </div> <div class="row"> <div class="col-xs-1 col-sm-1 col-md-3 col-lg-2 col-xl-3"> <span class="glyphicon glyphicons-490-handshake" aria-hidden="true"></span> <h4>Schritt 1</h4> <p class="step1-text">lallaallala lalalalal lalallalalal lalaalla lalala</p> </div> <div class="col-xs-1 col-sm-1 col-md-3 col-lg-2 col-xl-3"> <span class="glyphicon glyphicon-cloud" aria-hidden="true"> </span> <h4>Schritt 2</h4> <p class="step1-text">lallaallala lalalalal lalallalalal lalaalla lalala</p> </div> <div class="col-xs-1 col-sm-1 col-md-3 col-lg-2 col-xl-3"> <span class="glyphicon glyphicons-490-handshake" aria-hidden="true"></span> </span> <h4>Schritt 3</h4> <p class="step1-text">lallaallala lalalalal lalallalalal lalaalla lalala</p> </div> <div class="col-xs-1 col-sm-1 col-md-3 col-lg-2 col-xl-3"> <span class="glyphicon glyphicon-cloud" aria-hidden="true"> </span> <h4>Schritt 4</h4> <p class="step1-text">lallaallala lalalalal lalallalalal lalaalla lalala</p> </div> </div> </div></div><!-- Service --><!-- Reference --><div class="reference"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h1>lalalala</h1>
    7. </div> </div><!-- Reference --><!-- Contact --><div class="contact"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h1>Kontakt zum lalalal</h1> <div class="form-group row"> <label for="company-input" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 col-xl-5 col-form-label">Firma</label> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 col-xl-7"> <input class="form-control" type="text" value="" id="company-input"> </div> </div> <div class="form-group row"> <label for="name-input" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 col-xl-5 col-form-label">Name</label> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 col-xl-7"> <input class="form-control" type="text" value="" id="name-input"> </div> </div> <div class="form-group row"> <label for="phone-input" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 col-xl-5 col-form-label">Telefon</label> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 col-xl-7"> <input class="form-control" type="tel" value="" id="phone-input"> </div> </div> <div class="form-group row"> <label for="email-input" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 col-xl-5 col-form-label">Email</label> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 col-xl-7"> <input class="form-control" type="email" value="" id="email-input"> </div> </div> <button type="submit" class="btn btn-primary">Absenden</button> </div> </div></div><!-- Contact --><!-- Footer --><footer><div class="footer"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h2>Copyright &copy; lalalala 2017</h2> </div> </div></div></footer><!-- Footer --></div></body>
    8. <!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) --><script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script><script src="js/bootstrap.js"></script></html>

    Hallo,
    es war so einfach... Fehler ist gefixt was die Div Boxen angeht.
    Jedoch bleibt das Problem mit dem Hintergrund bestehen.


    Gruß


    Gruosh