CSS Hintergrund von 300px Wiederholung ab

StackOverflow https://stackoverflow.com/questions/1845714

  •  12-09-2019
  •  | 
  •  

Frage

Ich frage mich, ob jemand weiß, wie die folgenden zu erreichen - einen Blick auf http://www.dspts.si

Die erste 1/3 des Bildschirms einen leeren Hintergrund und von dort weiter sollte es ein Muster zu wiederholen. Ich habe es gerade jetzt, durch eine sehr lange Muster erstellen png und legen Sie es 300 bis Offset- und repeat-x. Allerdings bin ich mit dieser Lösung nicht zufrieden, weil sie brechen, wenn die Seiten jemals länger als das Hintergrundbild png ist.

Vielen Dank für Ihre Anregungen!

War es hilfreich?

Lösung

Setzen Sie

das sich wiederholende Muster als Hintergrund Element html, dann ein weißes 1px * 300px Bild als Hintergrundbild Element body, und Sie sind alle gesetzt. 

html, body {
    height: 100%;
}

html {
    background: url(dotted.png);
}

body {
    background: url(white_1x300.png) 0 0 repeat-x;
}

Sie müssen nicht html und body Tags für diese, aber es ist der einfachste Weg und erfordert keinen neuen Markup.

Andere Tipps

Sie können mehrere Hintergründe festlegen. Siehe Kann ich mehrere Hintergrundbilder mit CSS haben? . Die genannten Techniken sind:

  • Legen Sie die ganze Seite in einer anderen <div> Container oder missbrauchen den <html> Tages für sie.
    Dies bedeutet, dass Sie einen Hintergrund für <body> angeben und eine für <html>.
  • Verwenden Sie CSS3, die mehrere Hintergrundbilder unterstützen. Das ist noch nicht von allen gängigen Browsern unterstützt.

Ja, geben Sie Ihr Hintergrundbild als normal, aber setzen die background-position wie folgt aus: 

background-position:0 300px;

Dies wird das Hintergrundbild Start bei 0px von links machen, und 300px von oben.

Lassen Sie uns nicht vergessen, dass Sie verwenden können, FireBug mit FireFox leicht Techniken auf Websites zu diagnostizieren.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top