Beiträge von Jonathan C.

Jonathan C. · 7. März 2018

Hallo,

ich möchte gerne in meiner section home als Hintergrund ein Bild verwenden.

Leider wird dieses nicht richtig angezeigt, obwiohl der Pfad zur Datei korrekt vergeben wurde und das Bild auch im richtigen Verzeichnis liegt.

Ich bitte um Hilfe bei der Suche meines Fehlers.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DeinServer.net</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab">
   </head>

  <body>

   <!-- Header ---------------------->

    <header>
      <div id="logo">
        <a href="#">
          <img src="img/logo.png" alt="Logo">
        </a>
      </div>

   <!-- Navigation ---------------------->

      <nav id="main-nav">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#ueberuns">Über uns</a></li>
          <li><a href="#forum">Forum</a></li>
          <li><a href="#kontakt">Kontakt</a></li>
        </ul>
      </nav>
    </header>

    <!-- Home ---------------------->

    <section id="home">
      <hr>
      <h1>DeinServer.net</h1>
      <h2>Ein aufstrebender Minecraft-Server mit Potential</h2>
      <button type="button" name="join">Join: DeinServer.net</button>
    </section>

    <!-- Ueber uns ---------------------->

    <section id="ueberuns">
      <h3>Über uns</h3>
      <hr>
      <div style="width: 234px;">
        <ul>
          <li>
            <i class="fa fa-server" aria-hidden="true"></i><br>
             <p>
               Gute Server unterhalb einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> #
               Hier mit Zeilenumbruch zwischen Grafik und Text.
             </p>
          </li>
          <li>
            <i class="fa fa-code" aria-hidden="true"></i><br>
             <p>
               Gute Plugins einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> #
               Hier mit Zeilenumbruch zwischen Grafik und Text.
             </p>
          </li>
          <li>
            <i class="fa fa-commenting-o" aria-hidden="true"></i><br>
             <p>
               Community einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> #
               Hier mit Zeilenumbruch zwischen Grafik und Text.
             </p>
          </li>
          <li>
            <i class="fa fa-smile-o" aria-hidden="true"></i><br>
             <p>
               Spaßfaktor einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> #
               Hier mit Zeilenumbruch zwischen Grafik und Text.
             </p>
          </li>
          <li>
            <i class="fa fa-users" aria-hidden="true"></i><br>
             <p>
               Team einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> #
               Hier mit Zeilenumbruch zwischen Grafik und Text.
             </p>
          </li>
          <li>
            <i class="fa fa-money" aria-hidden="true"></i><br>
             <p>
               Zukunftsgarantie einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> #
               Hier mit Zeilenumbruch zwischen Grafik und Text.
             </p>
          </li>
        </ul>
      </div>
    </section>

    <!-- Forum ---------------------->

    <section id="forum">
      <h3>Forum</h3>
      <hr>
      <button type="button" name="forum">Besuche unser Forum</button>
    </section>

    <!-- Kontakt ---------------------->

    <section id="kontakt">
      <h3>Kontakt</h3>
      <hr>
      <form>
        <input type="text" tabindex="1" placeholder="Name"><br>
        <input type="email" tabindex="2" placeholder="E-Mail"><br>
        <input type="text" tabindex="3" placeholder="Betreff"><br>
        <textarea tabindex="4" placeholder="Nachricht"></textarea><br>
        <input class="button" type="submit">
      </form>
    </section>

    <!-- Footer ---------------------->

    <footer>
      <p>
        &copy;2018 | DeinServer.net
      </p>
    </footer>

  </body>
</html>

Alles anzeigen

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  text-align: center;
}

section {
  min-height: 100%;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

h1, h2, h3, a {
  font-family: 'Roboto';, sans-serif;
  font-weight: 500;
  color: #494949;
  text-transform: uppercase;
}

h2 {
  color: #5d7177;
  text-transform: none;
}

h3 {
  font-size: 40px;
  padding-top: 8%;
  margin-bottom: 5px;
}

p {
  font-family: 'Roboto Slab';, serif;
}

hr {
  width: 30px;
  height: 3px;
  background: #494949;
  border: 0;
  margin: 0 auto 40px auto;
}



/* Header ****************************/

header {
  width: 100%;
  height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

#logo {
  width: 140px;
  float: left;
  margin: 10px 0 0 50px;
}

#logo:hover {
  opacity: 0.5;
}

#logo, li {
  transition: all 300ms;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o.transition: all 300ms;
}

#logo img {
  width: 100%;
}

header nav {
  float: right;
  margin: 10px 50px 0 0;
}

header nav ul li {
  float: left;
  margin-right: 25px;
}

header nav ul li a{
  font-size: 16px;
}

header nav ul li:hover {
  padding-top: 5px;
}


/* Home ****************************/

#home {
  background: url(/img/landing.jpg);
  background-position: center center;
  background-size: cover;
}

#home h1 {
  margin: 240px auto 0 auto;
}

Alles anzeigen

Danke im Voraus.

MfG
Jonathan