hmm: HTML Hintergrundbild verkleinern und positionieren

Beitrag lesen

danke!

hier mein aktueller code:

<!DOCTYPE html>
<html>
<head>
    <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="#">&Uuml;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> 
                  <articale>
                    <header> 
                      <h1>Herzlich Willkommen liebe Kaffee Freunde!</h1> 
                    </header> 
                    <p>Wir freuen uns Ihnen auf dieser Seite unser Lieblingsspiel zu pr&auml;sentieren 
                    und hoffen das Sie genausoviel Spass daran haben werden wie wir.</p>
                  </articale>
                </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&uuml;tzen wollt, wo kauft &uuml;ber die angegebenen Links
                    bei unseren Partnern ein.
                </p>
                <p>
                    Wollt ihr stets auf dem laufenden bleiben &uuml;ber alle Updates auf dieser Seite? Dann tragt euch hier f&uuml;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&uuml;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>

hier meine fragen:

  1. mich regt cloud 9 auf, da ist vieles nicht so ausgereift wie mein prof meinte. welche ide kann ich für html, php, javascript verwenden? eine ide bei der ich nicht seperat xamp starten muss wär super, eine die wie nodepade die den code färbt aber zusätzlich noch die einzelnen ordner und unterordner des projekts anzeigt. ansonsten brauch ich nix in der ide, idealerweise eine die wenig arbeitsspeicher verbraucht (html in eclipse zu programmieren würde mir keinen spass machen)

  2. ihr könnt den code oben direkt ausführen, dann seht ihr mein nächsten probleme: a. Bootstrap macht die seite langsam, wie kann ich das beschlenigen? b. Bootstrap funktioniert auch nicht richtig, z.b. wird die schrift nicht so dargestellt wie in cloud 9, was muss ich tun?

  3. ich möchte eine startseite bauen die so aussieht:

a. header zeile, mit login rechts und links ein Text "Kaffeegeschenke" b. auf der rechten Seite des Bildschrims möchte ich meinen div Container haben. c. auf der linken Seite das Bild, nur dass das bild viel zu groß ist, das minimieren klappt überhaupt nicht.

ich glaube mein erster codeversuch ist fürn arsch und ich hätte auch gerne einen saubereren code. können wir das so machen, dass ihr mir sagt welche verbesserung ich zuerst schreiben soll ich das dann hier poste und ihr mir dann den nächsten schritt sagt? anstelle einer verbesserung kann ich auch nochmal neu anfangen