zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundgrafik splitten und variabel skalieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.01.2012, 19:03
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.04.2006
Beiträge: 130
fabske befindet sich auf einem aufstrebenden Ast
Standard Hintergrundgrafik splitten und variabel skalieren

Es geht um die sidebar rechts auf dieser webseite: Doris Schützbach | Bürodienstleistungen
Ich habe so ein Papierstück designt und es in drei Zeile zerschnitten. Einen Kopf, ein Mittelstück das nur 1px hoch ist und ein Endstück:

Oben: http://www.doris-schuetzbach.de/wp-c...debar_oben.png
Mitte: http://www.doris-schuetzbach.de/wp-c...ebar_mitte.png
Ende: http://www.doris-schuetzbach.de/wp-c...ebar_unten.png

Ich würde das mittlere Stück gerne so oft wiederholen oder (wie hier) stretchen dass es den Raum zwischen dem Anfang und dem Ende auffüllt. Die Obere Grenze konnte ich ganz einfach bestimmen und festschreiben mit background-position: center 120px;
Aber wie man sieht, weiß ich nicht wie ich das untere Ende erreichen soll, da es von der Höhe der Box abhängt! Hab jetzt mal background-size: 100% 20%; zur Demonstration eingestellt: In der großen Box oben reicht es nicht aus und in den kleinen unten läuft es über (sieht man am Schatten rechts).

Weiß jemand wie ich das Problem lösen kann? Vielen Dank schonmal!!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.01.2012, 19:31
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Kannst das Mittelteil nicht dem p geben? Du hast doch 3 tags zur Verfügung.
Dann kannst doch gut oben, mitte und unten verteilen.

Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.01.2012, 21:10
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Ich würde es folgendermaßen machen:

Mitte: Hintergrund
Oben: geschachteltes Element in Hintergrund
Unten: geschachteltes Element in Oben.

Unten bekommt dann den Inhalt. Die Ausrichtung der Hintergründe muss natürlich stimmen, oben und Unten liegen dann entsprechend vor der Mitte und schließen den Hintergrund so optisch ab.

Wenn mehr Inhalt kommt wird Unten länger und verlängert Mitte. Gibt es zu wenig Inhalt könnte man mit min-height bei Unten arbeiten.
Oben und Unten benötigen natürlich entsprechende Paddings und die Hintergrundblider dürfen keine Transparenz haben. Da die Seite in Hintergrund jedoch einfarbig ist (sieht im Moment so aus), ist das kein Problem.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #4 (permalink)  
Alt 09.01.2012, 22:10
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.04.2006
Beiträge: 130
fabske befindet sich auf einem aufstrebenden Ast
Standard

Manfred62: Die aside Elemente haben keinen einheitlichen Aufbau, es kann alles möglich darin sein.

Praktikant: Leider ist der Hintergrund ein gradient und deshalb sind die Bilder auch am Rand transparent! Man sieht es wie schon gesagt sehr schön am rechten Rand, wo der Schatten der Elemente übereinander steht..

Gibt es eine Möglichkeit die Höhe des aside-Elementes zu bestimmen? Eventuell mit JS? Dann könnte ich dem background-size den entsprechenden Wert zuordnen. Natürlich wäre mir eine reine CSS Lösung lieber..
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
Variable Breite -> Problem Hintergrundgrafik Korasu CSS 2 08.01.2010 01:26
Hintergrundgrafik und flexible Spaltenbreite Teaser CSS 1 27.11.2009 16:52
Alt="" für Hintergrundgrafik, weil CSS 2.1 diese nicht skalieren kann? DieterWelzel Barrierefreiheit 23 26.03.2008 09:10
<ul> variabel mit bgcolor - <li>Als Quelltextanz Unsk1ll3d CSS 2 04.05.2006 14:23
3-Spalten-Layout: Mitte fest - rest variabel moonworker CSS 2 19.03.2006 22:56


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:04 Uhr.