✔ Hintergrund auf Boxbreite skalieren?

Status
Nicht offen für weitere Antworten.
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 :D
 
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:

HTML: 
<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"/>

Die eine Zeile sollte die 4 Zeilen ersetzen aber es funktioniert beides nicht.

Gruesse,
Andreas
 
Zuletzt bearbeitet:
AGSzabo hat gesagt.:
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?
Zum Vergrößern anklicken....
Wenn 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.

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!

HTML: 
document.getElementById("pagebg").style.height = document.height+"px";

(http://www.majorchaos.de/augen.html)

gruesse,
Andreas

ps:

folgende zeile geht sogar bei ff, ie und o:

HTML: 
document.getElementById("pagebg").style.height = document.body.scrollHeight+"px";
 
Zuletzt bearbeitet:
AGSzabo hat gesagt.:
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.
Zum Vergrößern anklicken....
Klar, wenn du für das Element zusätzlich eine fixe Höhe definierst :rolleyes:

Das nächste Mal also erst denken, und dann (wider)sprechen.

mfg Maik
 
Ich verstehe zwar nicht welches Problem Du damit hast aber wenn ewtas falsch rüber gekommen ist, tut es mir leid. Hauptsache das Problem mit der Website ist gelöst. Danke nochmal fuer Deine Unterstützung.
 
Ein Problem hab ich überhaupt nicht, nur laß ich deinen vermeintlichen Widerspruch nicht gelten, denn meine Aussage bzgl. der dynamischen Höhe bezog sich auf diese Formatierung:

Code: 
<img src="..." width="100%" alt="">
bzw.
Code: 
<img src="..." style="width:100%" alt="">
Wenn hier nun zusätzlich eine feste Höhe (z.B. 500px) angegeben wird, funktioniert die Skalierung des Grafikelements eben nur noch in der Breite.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück