Background dynamich??

thecrazykaktus

Hi und zwar möchte ich folgendes tuen und zwar wird meine Page auf einer größe von 1280x1024 optimal dargestellt und auch bei 1024x768 jedoch mit einer einschränkung bei 1024x768 und zwar ist das background image dann zu groß!

ist es mir möglich das wenn ich eine auflösung von 1024x768 habe das sich das background automatisch auf eine richtige auflösung skalliert?
Derzeit sieht das so aus!

Code

<body leftmargin="1" background="images/westie3.gif" bgcolor="#FFFFFF" text="#000000" link="#108AFF" vlink="#108AFF" alink="#108AFF">

sejuma

Ob und wie es mit background-image geht, hab ich noch nicht herausgefunden.
Mit einem normalen image geht es so:

Code

[img]image.jpg[/img]

Anstelle der Pixlewerte des Bildes gibst du im Verhältnis der Pixel Prozentwerte für Breite und Höhe an. Damit passt sich das Bild jeder Auflösung an.

Falls jemand noch ne Lösung für background-image hat, würd's mich auch interessieren.

edit:
Hab' grad was gefunden: Background skalieren geht nicht. Soll aber mit CSS 3 (irgendwann in 5 - 8 Jahren) kommen.

Ronald

Ich habe bei einem ähnlichen Problem eine andere Lösung gewählt:

1. ein paar Grafiken entsprechend der gängisten Auflösungen angefertigt und auf den Webspace geschoben, z.B. bg800.jpg, bg1024.jpg, bg1200.jpg u.s.w.

Dann wird bei Aufruf der HP ein Javascript gestartet, welches die Bildschirmauflösung (besser wäre die innere Browserauflösung) ermittelt und dann einen passen Hintergrundbild lädt:

Code

<script type="text/javascript" language="JavaScript">
   <!--
var scw  = screen.width;
var sch  = screen.height;


if(scw >    0) size = 800;
if(scw >  800) size = 1024;
if(scw > 1024) size = 1152;
if(scw > 1152) size = 1280;
if(scw > 1280) size = 1600;


function bg()
  {
  document.getElementsByTagName("body")[0].style.backgroundImage = "url('images/bg"+size+".jpg')";
  }


window.setTimeout("bg()",1000);
-->
</script>

Alles anzeigen

G.a.d.M.

Ronald

thecrazykaktus

Das mit der javascriptfunktion finde ich sehr gut nur wie rufe ich denn dann diese funktion auf habe es jetzt so gemacht aber funktioniert halt nicht?!

HTML

<html>
<head>
<title>My Webpage Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css.css" rel="stylesheet" type="text/css">


<style type="text/css">body,td,th {font-family: Browser Default Font; font-size: x-small; }</style>


<style type="text/css">
<!--
body {
	background-repeat: no-repeat;
	margin-top: 1px;
	margin-right: 1px;
	margin-left: 1px;
}
-->
</style>
<script type="text/javascript" language="JavaScript">
   <!--
var scw  = screen.width;
var sch  = screen.height;


if(scw >    0) size = 800;
if(scw >  800) size = 1024;
if(scw > 1024) size = 1152;
if(scw > 1152) size = 1280;
if(scw > 1280) size = 1600;


function bg()
  {
  document.getElementsByTagName("body")[0].style.backgroundImage = "url('images/bg"+size+".jpg')";
  }


window.setTimeout("bg()",1000);
-->
</script>






</head>


<body leftmargin="1" background="javascript:bg()" bgcolor="#FFFFFF" text="#000000" link="#108AFF" vlink="#108AFF" alink="#108AFF">
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="280" height="106" valign="top"  background="images/links.gif"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="20"></td>
        <td height="20"></td>
      </tr>
      <tr>
        <td></td>
        <td height="82" valign="top"></td>
      </tr>
    </table></td>
    <td width="440" background="images/rechts.gif"></td>
    <td align="right" background="images/auffueller.gif">
      </td>
  </tr>
  <tr>
    <td height="31" colspan="2"  background="images/balken.gif"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="120" align="center">[b]<font size="2" face="Arial, Helvetica, sans-serif">[url='index.html']Home[/url]</font>[/b]</td>
        <td width="120" align="center">[b]<font size="2" face="Arial, Helvetica, sans-serif">[url='Site2.html']Kontakt[/url]</font>[/b]</td>
        <td width="120" align="center">[b]<font size="2" face="Arial, Helvetica, sans-serif">[url='Site3.html']Gästebuch Info[/url]</font>[/b]</td>
        <td width="120" align="center">[b]<font size="2" face="Arial, Helvetica, sans-serif">[url='Site4.html']Galerie[/url]</font>[/b]</td>
        <td width="120" align="center">[b]<font size="2" face="Arial, Helvetica, sans-serif">[url='Site5.html']Aktueller Wurf[/url]</font>[/b]</td>
        <td width="120" align="center">[b]<font size="2" face="Arial, Helvetica, sans-serif">[url='Site6.html']Links[/url]</font>[/b]</td>
      </tr>
    </table></td>
    <td align="right" background="images/balken.gif">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
        <td width="120" align="center"></td>
        <td width="120" align="center"></td>
        <td width="120" align="center"></td>
        <td width="120" align="center"></td>
        </tr>
      </table></td>
  </tr>
</table>
<table width="100%" height="75%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td></td>
    <td height="20"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td width="800" valign="top">
    </td>
    <td></td>
  </tr>
  <tr align="right">
    <td height="35" background="images/balken_unten.gif" colspan="3"></td>
  </tr>
  <tr align="right">
    <td height="20" colspan="3"><CENTER>[url='']Home[/url]|[url='']Kontakt[/url] |[url='#']Gästebuch[/url] |[url='']Galerie[/url] |[url='']Aktueller Wurf[/url] | [url='#']Links[/url]


        <span class="Stil1">2006 © Copyright Krebsbach-Westie.de.</span><FONT color=white>


        


        </FONT>
    </CENTER></td>
  </tr>
</table>




</p>
</body>
</html>

Alles anzeigen

Kannst du mir da weiterhelfen?

Ronald

Das Script ruft sich 1 Sekunde nach Ladebginn der HP ganz von selbst auf mit

Code

window.setTimeout("bg()",1000);

Nimm mal das

Code

<body leftmargin="1" background="javascript:bg()" bgcolor="#FFFFFF" text="#000000" link="#108AFF" vlink="#108AFF" alink="#108AFF">

koplett alles raus und setze dafür einfach nur

Code

<body>

Die Linkfarben pp. definiert man besser mit CSS, wie du es ja teilweise auch schon gemacht hast.

G.a.d.M.

Ronald

Tags