hmm: HTML Hintergrundbild verkleinern und positionieren

Beitrag lesen

hi, danke!!!

umlaute sind korrigiert:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>Kaffee</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
    <link href="http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet" />
    
    <style>
        /* http://css-tricks.com/perfect-full-page-background-image/ */
        html {
            background: url(ressourcen/willkommen_geschenk.jpg) left 10px;
            background-size: 100%;
            
        }
        body {
            padding-top: 20px;
            font-size: 16px;
            font-family: "Open Sans",serif;
            background: transparent;
        }
        h1 {
            font-family: "Abel", Arial, sans-serif;
            font-weight: 400;
            font-size: 40px;
        }
        /* Override B3 .panel adding a subtly transparent background */
        .panel {
            background-color: rgba(255, 255, 255, 0.9);
        }
        .margin-base-vertical {
            margin: 40px 0;
        }
    </style>
</head>
<body>
    
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <h1>Kaffee Game</h1>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Willkommen</a></a></li>
          <li><a href="#">Über uns</a></li>
          <li><a href="#">Partner</a></li>
          <li><a href="#">Kontakt</a></li>
          <li><a href="#">Registrieren</a></li>
          <li class=" btn-danger nav navbar-nav"><a href="anmelden.html">Anmelden</a></li>
        </ul>
      </div>
    </nav>
    
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-offset-3 panel">
                <p class="help-block text-center"><small>Kaffee Game</small></p>
                <main> 
                  <article>
                    <header> 
                      <h1>Herzlich Willkommen liebe Kaffee Freunde!</h1> 
                    </header> 
                    <p>Wir freuen uns Ihnen auf dieser Seite unser Lieblingsspiel zu präsentieren 
                    und hoffen das Sie genausoviel Spass daran haben werden wie wir.</p>
                  </article>
                </main> 
                
                <iframe width="560" height="315"
                src="https://www.youtube.com/embed/zxmED9JTPaA" frameborder="0" allowfullscreen>
                </iframe><br>

                <h1 class="margin-base-vertical">Kaffee-Shoppen und Game-Zocken</h1>
                <p>
                    Registriert euch einfach auf dieser Seite und erfreut euch an unserem Kaffee-Online Game.    
                </p>
                <p>
                    Wenn ihr die Weiterentwicklung des games unterstützen wollt, wo kauft über die angegebenen Links
                    bei unseren Partnern ein.
                </p>
                <p>
                    Wollt ihr stets auf dem laufenden bleiben über alle Updates auf dieser Seite? Dann tragt euch hier für unsere Newsletter ein:
                </p>
                <form class="margin-base-vertical">
                    <p class="input-group">
                        <span class="input-group-addon"><span class="icon-envelope"></span></span>
                        <input type="text" class="form-control input-large" name="email" placeholder="jonsnow@knowsnothi.ng" />
                    </p>
                    <p class="help-block text-center"><small>Wir senden Ihnen keinen Spam und geben Ihre E-Mail nicht weiter.</small></p>
                    <p class="text-center">
                        <button type="submit" class="btn btn-success btn-large">Anmelden für Newsletter</button>
                    </p>
                    </span>
                </form>
                <div class="margin-base-vertical">
                    <small class="text-muted"> Hier finden Sie unsere <a href="#">AGB's</a> und unser <a href="#">Impressum</a>.</small>
                </div>
            </div><!-- //main content -->
        </div><!-- //row -->
    </div> <!-- //container -->
</body>
</html>

jetzt weiß ich endlich für das die utf-8 geschichte gut ist :D