CSS Hintergrund von 300px Wiederholung ab
-
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!
Lösung
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.