|
|||
Background repeat, position
Hallo miteinander,
ich versuche einen sehr speziellen Fall zu realisieren. Ich habe ein Bild mit den Maßen width: 1400px; height: 600px; Dieses Bild soll als Hintergrund fungieren. Es soll vertikal zentriert sein. Es soll ein margin-left von 320px haben (dieses Flächenstück von 320x600 soll weiss bleiben). Es soll nach rechts aus dem Bild ragen und sich bei Bedarf wiederholen. Ich konnte eine Variante mit dem Bild als festen Hintergrund bereits realisieren: HTML-Code:
body { background: transparent url('../grafics/bild.jpg'); background-position: 320px center; background-attachment:fixed; background-repeat: no-repeat; } Die folgende Variante liefert ein eigenartiges Ergebnis: HTML-Code:
body { background: transparent url('../grafics/welcome.jpg'); background-position: 320px center; background-repeat: no-repeat; } HTML-Code:
background-repeat: repeat-x; Weiß jemand Rat? |
Sponsored Links |
|
|||
Dein Vorhaben lässt sich mit CSS2.1 nicht umsetzen. Wenn du die Fläche links weiss lassen willst, kannst du das Bild nicht wiederholen lassen.
Entweder wiederholen lassen oder fixieren, für andere Spielereien musst du dich mit CSS3 beschäftigen. Da sind dann mehrere Hintergrundbilder möglich, funktioniert jedoch nur in modernen Browsern.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Es wäre viel einfacher, eine DIV-Box einzubauen. Zunächst den Hintergrund (großes Bild) wie gehabt im BODY repeaten lassen und der DIV-Box einen weisen Streifen der Breite 320px mit repeat-y top left einbauen, das entsprechende CSS kann mit body > div zugewiesen werden.
Ebenfalls möglich, das HTML-Tag bekommt das große Bild und BODY den weißen Streifen, dann ist kein zusätzliches DIV notwendig. Wenn der weiße Streifen immer weiß bleibt und keine anderen Elemente/ Text enthält, wäre auch ein body {border-left:solid 320px #fff;} möglich. VG |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navigation positionieren | maybebabe | CSS | 4 | 08.04.2013 23:17 |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
Inline Listenelement wird nicht richtig im background befüllt | SteveB | CSS | 3 | 28.04.2011 21:41 |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 15:30 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |