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>
  • Hallo,
    es war so einfach... Fehler ist gefixt was die Div Boxen angeht.
    Jedoch bleibt das Problem mit dem Hintergrund bestehen.

    Gruß

    Gruosh

Jetzt mitmachen!

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