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
    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
    <!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">
    <!-- Bootstrap CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <!-- WebAmeise CSS --><link rel="stylesheet" type="text/css" href="css/webameise.css">
    <title>WebAmeise - eCommerce</title>
    </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>
    <!-- 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>
        </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>
    <!-- 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>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!