• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrund der Auflösung anpassen

Status
Für weitere Antworten geschlossen.
K

kiki123987

Neues Mitglied
Hallo,

ich mache grade eine Homepage und habe diese in 3 Frames aufgeteilt. Der Hintergrund eines Frames ist ein Farbverlauf, doch je nach Auflösung des BIldschirms wird der Farbverlauf nicht komplett angezeigt oder wieder holt sich. Ist es möglich mit HTML den Hintergrund an die Auflösung anzupassen oder das Bild so zu strecken dass es immer gestreckt ist in dem Frame? Wenn nicht hat jemand einen Vorschlag wie dies mit CSS gehen könnte (auch wenn ich mich mit css überhaupt nicht auskenne.) Hätte da jemand ne Idee? Vielen Dank schon im Vorraus! :razz:
 
Im Grunde kannst du endweder den farbverlauf so machen das man ihn wiederholen kann (z.B. nimmst du einen verlauf von links nach rechts und wiederholst ihn in die länge unendlich und in die weite ist er nach x pixeln komplett in die hintergrundfarbe übergegangen) oder du arbeitest mit vektorgrafiken die sich vergrößern lassen .
 
Das geht auch nicht mit CSS. Hintergrundgrafiken behalten ihren originären Höhen- und Breitenwert.
Du kannst eine Grafik so groß anfertigen, dass sie auch in großen Fenstern angezeigt wird. In kleineren fehlt dann aber ein Teil.
Umgekehrt kannst du mit "repeat: no-repeat;" das Kacheln verhindern.
Aber einen Automatismus der Vergrößerung oder Verkleinerung gibt es nicht.

man kann mit Javascript noch die Bildschirmauflösung auslesen und dann alternative Grafiken einblenden.

Oder du verwendest flexible Hintergrundgrafiken, indem du etwas trickst.
Das passt allerdings nicht zu jedem Layout und kommt immer auf den Einzelfall an.
Hier mal zwei Beispiele:
Dynamische Hintergrundgrafik
Dynamischer Header mit einer Konsole

oder auch eine Möglichkeit:
Dynamische Flüssigbilder
 
So ein Freund hat mir mal was geschickt. Ich habe es auf meine Seite angewendet und im IE klappt es einwandtfrei. Jedoch wird im Firefox garnichts mehr angezeigt...Hat jemand da eine Idee?
Der Quelltext wär:

<html>

<head>
<title>Kein Titel</title>
<base target="detail">
<style type="text/css">
<!--
* { margin: 0;
padding: 0;}

/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
height: 100%;
overflow: hidden;}

/* BG-Image auf unterste Ebene anordnen */
#bgImg{ position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1;}
/* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
#bodyDiv{ position: absolute;
top: 0;
left: 0;
z-index: 2;
overflow: auto;
width: 100%;
height: 100%;
text-align: center;}

/* Layoutelemente */
#mainDiv{ width: 600px;
height: 100px;
text-align: left;
margin: 18px auto;}
#headDiv{ border: 1px solid #000;
background: #efefef;}
#contentDiv{ border: 1px solid #000;
background: #f0fff0;
margin-top: 6px;
height: 1000px;}
#footerDiv{ border: 1px solid #000;
background: #fffff0;
margin-top: 6px;}
//-->
</style>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<img id="bgImg" src="background_left.jpg" width="100%" height="100%">

<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" namo_flashbutton width="102" height="31">
<param name="movie" value="button_05.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
<param name="WMode" value="Transparent">
<embed width="102" height="31" src="button_05.swf" play="true" loop="true" quality="high" WMode="Transparent" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></object></p>
<p>&nbsp;</p>
</body>

</html>

In rot wird angezeigt was ich an der Seite geändert habe um den Hintergrund an die Auflösung anzupassen.
Also...jemand ne Idee wieso das im IE klappt aber nicht im Firefox?
 
Aber bitte immer daran denken, dass die Bildschirmauflösung bei der Erstellung von Websites keinen Stellenwert besitzt. Das ist auch schon daran zu erkennen, dass die Sprache, die für Layout und Design zuständig ist (CSS) keine Möglichkeit hat, die Aufllösung zu bestimmen, sie nicht kennt, und sich prozentuale Größenangaben auch niemals auf die Auflösung beziehen.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben