ERLEDIGT
JA
JA
ANTWORTEN
16
16
ZUGRIFFE
2899
2899
EMPFEHLEN
-
Hallo,
ich habe eine <div> die mit zunehmender Festerbreite wächst, weil sie 80% des Fensters breit ist. Aber der Hintergund des <div> soll nicht wiederholt werden, sondern mitwachsen, geht das? Ich bin auch fuer Javascript-Lösungen offen.
danke,
Cu
Andreas SzaboGeändert von AGSzabo (06.11.08 um 12:17 Uhr)
-
06.11.08 12:26 #2
- Registriert seit
- Aug 2007
- Ort
- Pfalz
- Beiträge
- 219
[CODE]
background-repeat: no-repeat;
[CODE]
http://www.css4you.de/background-repeat.html
-
Danke aber nein, du verstehst mich falsch. Der Hintergrund soll in der Breite mit der <div>-Box mitwachsen oder schrumpfen.
Geändert von AGSzabo (06.11.08 um 12:44 Uhr)
-
06.11.08 12:43 #4Maik Tutorials.de Gastzugang
Hi,
ein Hintergrundbild kann lediglich wiederholt werden, aber nicht "mitwachsen" bzw. "skaliert" werden.
Eine Skalierung wäre nur mit einem Grafikelement möglich - siehe hierzu 100% 'background' image.
mfg Maik
-
Naja, ich dachte vielleicht mit einem Javascript. Aber ich probiers nochmal mit Ebenen.
-
06.11.08 13:05 #6Maik Tutorials.de Gastzugang
Mit Javascript kommst du da auch nicht weiter, da es letztlich auch nur mit den zur Verfügung stehenden CSS-Mitteln arbeitet.
mfg Maik
-
Für die ganz krassen: evtl kann man die Grafik mit einem PHP-Script skalieren? Oder aber ganz einfach mit einem Javacsript austauschen (fuer alle 10-20 Pixel Breitenveränderung eine sollte nicht zu schlimm zum laden sein)? Das wär doch was, oder?
Geändert von AGSzabo (06.11.08 um 14:14 Uhr)
-
06.11.08 14:45 #8Maik Tutorials.de Gastzugang
PHP läuft serverseitig ab und bietet hierfür keine Funktionen, folglich lässt sich damit ein Hintergrundbild ebenso wenig skalieren.
Und was machst du mit den Werten, die dazwischen liegen? Und willst du für jede erdenkliche Breite die entsprechend dimensionierte Grafik auf dem Server hinterlegen?
Fazit: "Mission impossible"
mfg Maik
-
Danke für Deinen Rat. Ich glaube jetzt eine umsetzbare Lösung gefunden zu haben. Die Werte, die dazwischen liegen bekommen halt nur einen fast-passenden Hintergrund. Da es ein sehr dezenter Farbverlauf ist, wird der Besucher es nicht bemerken. Ich bestimme eine min-width und eine max-width, damit das nicht ausufert, teile einfach die Breite durch 20 und nehme eines von sagen wir mal 20 Bildern. Müsste gehen, aber wie genau?
Aber ich habe gelesen dass CSS3 mein Anliegen unterstuetzt. Blos wann das kommt steht in den Sternen... oder?
-
06.11.08 15:18 #10Maik Tutorials.de Gastzugang
Du sprichst von background-size. Wann diese Eigenschaft in allen Browsern endgültig implementiert sein wird, kann ich dir leider nicht sagen, und hab sie daher in diesem Thread auch nicht erwähnt, da sie dir zum heutigen Zeitpunkt noch nicht weiterhilft.
mfg Maik
-
Bei Farbverläufen mache ich es immer so, dass ich die letzte Farbe des Verlaufs auch als Hintergrundfarbe anlege.
Oder ich nehme einen Farbverlauf, welche ewig lang ist, sodass er immer reicht
-
Hallo nochma,
Naja, wer will kann sich mal mein "Problem" da anschauen: http://www.majorchaos.de/augen.html .
Ich habe zur Lösung mal ein PNG-Image in den Hintergrund getan mit z-index = -1, das wird auf 100% breite des Fensters skaliert und der text wurde mit % genau auf den weissen Bereich geschoben. Nun müsste ich noch mit einem Javascript die Höhe des Bildes auf die tatsächliche Seitenlänge setzen. Geht das? Oder gibts ne andere Idee?
Ich habe es derweil mal so versucht aber es geht nicht:
Die eine Zeile sollte die 4 Zeilen ersetzen aber es funktioniert beides nicht.HTML-Code:<style type="text/css"> #pagebg { z-index:-1; width:100%; position:absolute; } </style> <script type="text/javascript"> <!-- function neuAufbau() { /* if (window.innerHeight) wHeight = window.innerHeight; else if (document.body && document.body.offsetHeight) wHeight = document.body.offsetHeight; else wHeight = 0; document.getElementById("pagebg").style.height = wHeight; */ document.getElementById("pagebg").style.height = document.height; } window.onresize = neuAufbau; //--></script> </head> <body onload="neuAufbau()"> <img alt="" id="pagebg" src="pagebg_wide.png"/>
Gruesse,
AndreasGeändert von AGSzabo (07.11.08 um 02:47 Uhr)
-
07.11.08 03:35 #13Maik Tutorials.de GastzugangWenn einem Grafikelement das Attribut width="100%", oder wie in deinem Fall über CSS die Eigenschaft width:100% mit auf dem Weg gegeben wird, skaliert der Browser dessen Höhe im Verhältnis zur dargestellten Breite automatisch, und jeglicher JS-Code ist überflüssig.
Zitat von AGSzabo
mfg Maik
-
Hallo nochmal,
zum Glück muss ich Dir widersprechen. Ich habe die Höhe auf 500px eingestellt bei 100% Breite und wenn ich die Fensterbreite verändere passt sich die Image-Breite an aber es bleibt die Höhe konstant bei 500px.
Ich habe jetzt die Zeile verändert und jetzt funktioniert es!
(http://www.majorchaos.de/augen.html)HTML-Code:document.getElementById("pagebg").style.height = document.height+"px";
gruesse,
Andreas
ps:
folgende zeile geht sogar bei ff, ie und o:
HTML-Code:document.getElementById("pagebg").style.height = document.body.scrollHeight+"px";Geändert von AGSzabo (07.11.08 um 08:13 Uhr)
-
07.11.08 08:34 #15Maik Tutorials.de GastzugangKlar, wenn du für das Element zusätzlich eine fixe Höhe definierst Zitat von AGSzabo
Das nächste Mal also erst denken, und dann (wider)sprechen.
mfg Maik
Ähnliche Themen
-
Hintergrund skalieren
Von SAMariter im Forum CSSAntworten: 1Letzter Beitrag: 19.11.10, 16:53 -
Tabellen Hintergrund Farbe soll sich ändern nicht der Hintergrund der Seite !
Von pantoon im Forum Javascript & AjaxAntworten: 3Letzter Beitrag: 19.11.08, 11:23 -
Hintergrund skalieren
Von emonem im Forum HTML & XHTMLAntworten: 4Letzter Beitrag: 01.12.05, 14:55 -
Grafik skalieren als Hintergrund
Von fruchtgummi im Forum CSSAntworten: 1Letzter Beitrag: 11.05.05, 14:03 -
swf in film laden, skalieren + hintergrund
Von uniquetutorial im Forum Flash PlattformAntworten: 12Letzter Beitrag: 30.06.04, 15:45
Login
