2017-12-19 2 views
-4

Ich möchte eine Rakete auf meiner Webseite erstellen, die von der Erde zum Mond fliegt. Für den Hintergrund dachte ich an 1 Bild, das so aussieht: background . Ich bin ziemlich neu bei all dem, so dass ich nicht weiß, ob es mit einer großen Höhe möglich ist und welche Qualität das Maximum des Bildes als Hintergrund hat.Wie lange kann ein Hintergrundbild sein?

ich frage mich, wie ich die Größenanpassung für den Hintergrund beheben kann, so dass es nur auf die Breite und nicht die Höhe konzentrieren. Ich möchte nur die Breite im Browser vollständig.

Vielen Dank im Voraus.

+0

'Hintergrund-Größe verwenden müssen: Cover; 'wird Ihnen mit etwas davon helfen. Aber realistischerweise würden Sie wahrscheinlich kleinere "Scheiben" haben wollen. –

+0

Wird das Hintergrundbild nicht mit Cover aus dem Browser entfernt? Und was meinst du mit Scheiben genau? Danke für die Reaktion! @NiettheDarkAbsol –

+0

Die tatsächliche Größe in px ist irrelevant. Sie können dem Browser mitteilen, dass er sie behalten oder ignorieren soll. Sie können ein Bild beliebiger Größe in beliebiger Größe anzeigen, ohne Einschränkungen (natürlich innerhalb der technologischen Grenzen). Sie können es verzerren oder seine ursprüngliche Größe beibehalten. In der Tat kann alles, was Sie sich vorstellen können getan werden. In Bezug auf die Größe in "kb" möchten Sie vielleicht versuchen, den gewünschten Effekt mit der kleinstmöglichen Größe bereitzustellen, sodass Personen mit eingeschränkten Verbindungen nicht 10 Minuten warten müssen, um das Hintergrundbild tatsächlich zu sehen. –

Antwort

-2

Verwenden Sie background-size: cover;, um den Hintergrund zu füllen.

+1

'background-image: cover' ist ** ungültig **. Du meinst wahrscheinlich 'background-size: cover', was nicht' background-repeat: no-repeat' erfordert, da es technisch unmöglich ist, einen Hintergrund mit der auf 'cover' eingestellten Größe zu wiederholen, da er so dimensioniert ist * abzudecken * die gesamte Fläche des Elements. Ich nehme an, du meintest Hintergrund: no-repeat 0/contain; '. Aber so einfach ist das nicht. Um schön anzuzeigen, kann eine Mindesthöhe für das Element erforderlich sein. Wahrscheinlich '200vw' oder so, in Anbetracht der Proportionen des Bildes. –

0

Sie können es tun, indem Sie eine div-Klasse erstellen nennen bg es zum Beispiel:

.bg { 
    /* The image used */ 
    background-image: url("image.png"); 

    /* Center and scale the image nicely */ 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

Jetzt, wo wir die div class eingestellt haben wir es

<body> 
    <div class="bg"> 
     /* place page contents here */ 
    </div> 
</body> 
Verwandte Themen