2016-04-28 8 views
0

Ich verwende den folgenden Code, um ein Hintergrundbild für meine Website zu erstellen. Es funktioniert und macht es zu einem Vollbild-Hintergrund, Allerdings schrumpft es mein Bild auf, ich verstehe nicht warum. Es sieht so aus, als ob es von jeder Seite ungefähr einen Zoll entfernt ist.Vollständige Seite Bildprobleme

Hier ist der Code, direkt von CSS Tricks

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

hier meine volle CSS ist,

/*! 
     * Start Bootstrap - Full HTML Template (http://startbootstrap.com) 
     * Code licensed under the Apache License v2.0. 
     * For details, see http://www.apache.org/licenses/LICENSE-2.0. 
     */ 
     * {margin: 0; padding: 0;} 


     /* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */ 

     html { 
      background: url('/images/bg.jpg') no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      background-size: cover; 
      -o-background-size: cover; 
     } 



     #thanks { 

     position: absolute; 
     width: 300px; 
     height: 75px; 
     z-index: 15; 
     top: 98%; 
     left: 50%; 
     margin: -100px 0 0 -150px; 
     text-decoration: none; 
     text-align: center; 
     font-size: 36px; 
     background-color: #3a1e49; 
     color: #edcd05 !important; 
     font-family: "Times New Roman", Times, serif; 
     border-radius: 25px; 

     } 

     #thanks:hover { 

     background-color: #edcd05; 
     color: #3a1e49; 
     } 


     #thanks a { 

     color: #edcd05; 
     text-decoration: none; 
     position: relative; 
     bottom: 10%; 
     } 

     #thanks a:hover { 

     color: #3a1e49; 
     } 

Unterhalb der HTML

<!DOCTYPE html> 
      <html class="full" lang="en"> 


      <head> 
       <meta charset="utf-8"> 
       <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
       <meta name="viewport" content="width=device-width, initial-scale=1"> 
       <meta name="description" content=""> 
       <meta name="author" content=""> 
       <title>Demo</title> 
       <link href="css/full.css" rel="stylesheet"> 
      </head> 
      <body> 
      <!-- 
       <div id="thanks"> 
        <p><a href="thanks.php">Share a Memory</a></p> 
       </div> 

       --> 
       <script src="js/jquery.js"></script> 
       <script src="js/bootstrap.min.js"></script> 
      </body> 
      </html> 
+0

Hat Ihr Eltern-Container eine Auffüllung? – Lee

+0

Sie brauchen eine Geige b/c Ich garantiere, es gibt einige andere CSS, die dies geschieht - haben Sie eine "Normalisierung" css vorher? Beispiel - https://the-pastry-box-project.net/oli-studholme/2013-june-3 –

+0

Ich habe meine volle CSS hinzugefügt. Funktioniert immer noch nicht. – KevinM1990112qwq

Antwort

0

Sie Ihr Bild Abdeckung dieses Mittel hergestellt es wird sich über den Bildschirm erstrecken.

stellen Sie sicher, dass Ihr Bild größer als Ihre Bildschirmauflösung ist. für EX: Wenn Ihre Bildschirmauflösung 1024 * 728 ist, dann sollte die Bildbreite größer als 1024 und die Höhe 728 sein.

+0

Was, wenn ich will, dass es auf allen verschiedenen Bildschirmgrößen perfekt passt. – KevinM1990112qwq

+0

AKTUALISIERT meinen Code. – KevinM1990112qwq

+0

@ KevinM1990112qwq sollten Sie Bilder mit großer Auflösung und geringer Größe schnell laden. :) –

Verwandte Themen