kostenloser Webspace werbefrei: lima-city

Hintergrundbild in die Waagerechte strecken

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   fcr

   

   fcr hat kostenlosen Webspace.

   19:47, 10.3.2008

   Ich habe für meinen Blog http://pp-news.net ein Bilder (http://root.pp-news.net/html/wordpress/wp-content/themes/rockinnewspaper-3col-1/svg/seite/header/Zeichnung.png) gemacht, dass in den Hintergrund gesetzt werden soll. Dabei soll das Bild je nach Auflösung gestreckt werden, sodass es die ganze Breite einnimmt (Höhe so lassen).
   
   Versuch 1: Das Bild in einen <div>-Container getan, der mit width:100% formatiert war.
   http://img405.imageshack.us/my.php?image=bildschirmfoto1eh3.png
   Ergebnis: Überdeckt leider auch den eigentlichen Blog (#container). Und das soll ja nicht so sein.
   
   Möglichkeit 2: CSS3.
   Funktioniert nur leider noch nicht mit aktuellen Browsern
   
   Möglichekti 3: Einzelstücke (links des Banners, rechts davon, darüber, darunter) einfügen. Scheitert auch hier an der unterschiedlichen Breite, da ich nicht genau weiß, wie weit ich die Farbverläufe links und rechts verzerren muss (#container ist immer in der Mitte).
   
   Möglichkeit 4: Die Auflösung auswerten und das Bild dementsprechend verzerren (serverseitig). Ich weiß aber nicht, wie man das macht und mit welcher Sprache.
   
   Möglichkeit 5: Javascript? Bin mir nicht sicher, ob das möglich ist.
   
   Möglichkeit 6: Auflösungsweiche. Z.B. wenn der Bildschirm mit 800 Pixeln Breite ausgestattet ist, das Bild bild_800.png laden usw. Scheitert aber daran, dass Browserfenster nicht maximiert esin muss.
   
   Möglichkeit 7: Wie Versuch 1, nur dass die Stelle, wo der #container hinkommt 100% transparent ist. Scheitert aber daran, dass die transparente Stelle mit verzerrt wird.
   
   Wie kann man das Problem lösen?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. t*****b

   20:06, 10.3.2008

   Einzige wirkliche Möglichkeiten:
   - Kein Hintergrundbild verwenden, sondern ein IMG und width auf 100%
   - Deiner Seite eine feste Größe verpassen und dem Hintergrundbild die gleiche Breite geben
   
   Alles andere, vor allem Weichen oder per JavaScript anpassen ist weniger effektiv.

4. raubritta

   

   raubritta hat kostenlosen Webspace.

   20:07, 10.3.2008

   wenn du die höhe so lassen willst einfach height = 50 oder so.
   
   ICh weiß wirklich nicht, ob ichs richtig verstanden hab. Du hast um dein
   anliegen herumgeredet ;)
5. Autor dieses Themas

   fcr

   

   fcr hat kostenlosen Webspace.

   20:39, 10.3.2008

   Das mit dem IMG, das dann width=100% hat, hab ich ja schon gemacht (entspricht Versuch 1). Das Problem ist nur:
   Mit <img> hab ich das Bild im Vordergrund statt im Hintergrund
   Mit <div style=\"width:100%\"><img></div> hab ich immerhin das Bild transparent im Vorderung, aber auch nicht im Hintergrund.
6. Autor dieses Themas

   fcr

   

   fcr hat kostenlosen Webspace.

   21:00, 10.3.2008

   Nochmal zur Erklärung: Ich will das es so: http://img405.imageshack.us/my.php?image=bildschirmfoto1eh3.png aussieht, nur dass das blaue Bild vollkommen in den Hintergrund kommt, d.h. von dem Headerbild (die Karte) und dem restlichen Inhalt (der div-Bereich \"container\") überdeckt wird.
   
   Der eleganteste Weg wäre ja über CSS. Aber das entsprechende Feature kann nur der atm Konqueror richtig darstellen.
   Mir wäre übrigens eine andere Sprache recht. XML, XSL-FO, ... keine Ahnung mit was man sowas machen kann. Auch serverseitig ist ok.
   
   
   Beitrag geändert: 10.3.2008 21:14:36 von fcr
   
   
   Beitrag geändert: 10.3.2008 21:16:44 von fcr

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?