zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Background repeat, position

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.08.2013, 03:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2011
Beiträge: 41
Philidor befindet sich auf einem aufstrebenden Ast
Standard 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; }
Durch attachment-fixed wurde das Bild nicht scrollbar und aufgrund seiner Größe war ein x-Achsen repeat nicht mehr notwendig.

Die folgende Variante liefert ein eigenartiges Ergebnis:

HTML-Code:
body { background: transparent url('../grafics/welcome.jpg'); background-position: 320px center; background-repeat: no-repeat; }
Es scheint als würde sich "320px" und "center" plötzlich nicht mehr vertragen und das Bild zerreißen.

HTML-Code:
background-repeat: repeat-x;
bringt das Problem mit sich, dass der Hintergrund nicht nur nach rechts sondern auch nach links wiederholt wird.

Weiß jemand Rat?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.08.2013, 15:47
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.08.2013, 19:08
Benutzer
neuer user
 
Registriert seit: 23.09.2008
Beiträge: 62
mariane befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 17.08.2013, 18:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2011
Beiträge: 41
Philidor befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:10 Uhr.