Background Image Abfrage

Hi!

ich habe folgendes Problem. Ich nutze ein Bild als Background (<img src="...) für meine Seite und diese Bild sieht je nach Browser Seitenverhältnis gestreckt oder gedrück aus - logisch.

Kennt einer von euch eine Möglichkeit die Fensterhöhe und -breite auszulesen, damit ich damit dann das Seitenverhältnis berechnen kann (Höhe durch Breite) um daraufhin sagen wir mal 2 verschiedene Hintergrundbilder zu laden, je nach Wert?

Beispiel:
z.b. 1024 x 768 --> Seitenverhältnis 1,33
z.b. 1920 x 1200 --> Seitenverhälntis 1,6

<?php if $x <= 1,34 : echo ('bild1.jpg');
elseif $x >= 1,35 : echo ('bild2.jpg');
endif; ?>

Ich lade für jeden Menüpunkt ein eigenes Bild, das passiert bereits per PHP abfrage:

<img id="top" src="
<?php if (is_home() or is_single()): 
bloginfo('template_url');echo('/images/blog.jpg'); 
elseif  (is_page('service')):
bloginfo('template_url');echo('/images/service.jpg'); 
elseif  (is_page('portfolio')):
bloginfo('template_url');echo('/images/portfolio.jpg'); 
elseif  (is_page('kontakt')):
bloginfo('template_url');echo('/images/kontakt.jpg'); 
else : bloginfo('template_url'); echo('/images/blog.jpg'); endif;
?>" alt="" />

Ich vermute bisher folgendes:

Ich muss per javascript die innerwidth und innerheight auslesen und diese variablen dann an php übergeben um o.g. berechnung durchzuführen und daraufhin, je nach wert, das entsprechende bild zu laden..

hört sich cool an oder? aber wie mach ich das :mrgreen: ?

Danke schon mal an alle PHP/Javascript Experten

Zitat von kaiser

wieso stellst du es nicht einfach in nur einer größe ein (am besten 2.500px x 1600px) und fertig?

Das hab ich ja, das Bild ist im Hintergrund "top left fixed" und hat "Übergröße"

Das Problem ist, dass bei Widescreen Monitoren das Bild natürlich gestreckt wird und ich aus dem Grund 2-3 verschiedene Varianten des Bildes laden wollte. je eine Variante für 4:3 Format, 16:9 Format und evtl. 21:9 Format.

Ich hab inzwischen eruiert wie ich JavaScript innerwidth und innerheight bekomme und das dann auch dividieren kann um meine zahl zu bekommen.

nur wie bekomme ich diese Zahl in eine php variable?

ich weiß nicht genau was du mit sliding doors meinst, aber ich Google das mal, sobald ich wieder geschlafen habe :-) hab morgen abend Abgabetermin und war den ganzen Tag mit der IE-CSS Datei beschäftigt...scheiss Microsoft, ehrlich....
Danke schon mal!!

ich will doch dass das Bild die größe ändert - es ist alles absicht so, sonst hätte ich es ja einfach als background image ins DIV setzen können.
ich hab es aber "width und height 100%" als "img", "z-index:-1" eingefügt, damit man die Person die abgebildet ist immer im Blickfeld hat und der content da oben drauf (aber links neben der person)scrolled.

wenn ich es mit einer festen größe reinsetze verschwindet die person und dann ist das bild wertlos.

und es funktioniert genauso wie geplant bis auf die kleine -logische- konsequenz, dass nicht alle monitore das gleiche seitenverhältnis haben wie meiner, auf einem 4:3 monitor sieht die "alte" dünn aus auf meinem 16:9 normal und auf einem 21:9 superfett :mrgreen:

ergo, ich würde das bild garnicht in verschiedenen größen hinterlegen, sondern nur in verschiedenen seitenverhältnissen und deshalb suche ich da eine lösung. hab z.zt. viel um die ohren, aber sobald ich mit den aktuellen projekten durch bin, werd ich mich der sache ernsthaft widmen und dann ne lösung posten, sofern es eine gibt.

LG

also wenn das tatsächlich funktioniert, dann geb ich dir einen aus :-D
werd das heut abend gleich mal austesten!!

vielen dank schon mal!