Resize des Header-Background mit ccs

[Rikz]

Hallo zusammen,

ich habe gestern eine neuen Hintergrund in den Header eingefügt.
Nun ist es jedoch so, dass nich alle eine Auflösung von 1280x1024 benutzen und die Grafik dadurch nicht komplett oder mehrfach angezeigt wird.
Ich würde ganz gern, dass sich das Bild im Header Background automatisch der Autlösung des Besuchers anpasst.

Ich habe es schon mit

Code: Alles auswählen

background-size: 100%;

und mit

Code: Alles auswählen

width:100%;

versucht leider hatte beides keinen Erfolg.

Könntet ihr mit bitte zur Hand gehen oder mit einen Tipp geben wie ich das anstellen kann?

Danke und Gruß
Frederik

[eXem3]

Hi, das gleiche Problem habe ich derzeit auch ... hab mir schon ein wolf hier abgesucht und selber nen Frage gestartet.

Alles was ich so gelesen habe und probiert habe vergeblich.

Hab derzeit das Logo mal auf center gesetzt und auf no repeat, bis hier jemand die Lösung für das Problem hat

[aurora876]

gibts da einen screenshot von?

[eXem3]

Also bei mir sieht das so aus:

[ externes Bild ]

Das Bild soll aber nur einmal erscheinen und das komplett

Code: Alles auswählen

.headerbar {
	background-color: #808080;
      background-image: url("{T_THEME_PATH}/images/site_logo_new.jpg");   	background-position: center;
	color: #000000;
	height:175px;

[Rikz]

Ja genua so sieht das auch bei mir aus...

Hat einer der erfahrenen CSS Programmierer einen Tip für uns ?

Gruß
Frederik

[roum]

Hi,
meiner Meinung nach ist es gar nicht möglich ein Backgroundimage mittels CSS perfekt an alle möglichen Auflösungen anzupassen.

Ich habe gerade mal google bemüht um mich nochmal zu vergewissern und bin dabei auf folgenden Artikel gestoßen.
http://www.phpblogger.net/2008/01/30/cs ... und-punkt/
Da wird genau diese Thematik angesprochen.

Eine Headergrafik ist immer die Problemstelle wenn man sich darüber gedanken macht wie man seine Webseite frei skalierbar gestalten kann
Mit HTML/CSS bleibt einem nur die Möglichkeit die Grafik so zu wählen das sie in kleinen und großen Auflösungen "funktioniert".
Die Grafik müsste dann so groß sein das man bei hohen Auflösungen eben nicht diesen Kacheleffekt hat und man muß sie so positionieren das der gewünschte Teil dann für alle sichtbar ist.
Den Rest des Bildes sieht man dann halt nur in einer hohen Auflösung. Wenn man bedenkt das neue Widescreen Monitore evtl. sogar breiter als die Grafik sind kann man das Ganze mit einer max-width einschränken.

[franki]

Eine weitere Möglichkeit ist, wie es auch meistens bei allen Hintergrundgrafiken ist, das Bild in 2-3 Teile zu stückeln.
Links und rechts einen großen Teil und für die mitte einen kleinen Teil der sich dann, je nach Auflösung, wiederholt.

Wie z.B beim Style AeroRed, dort gibt es 3 Grafiken für den Header.
1. midl.png (303 x 80px) für den linken Teil (feste Breite)

Code: Alles auswählen

<td width="303" height="80" style="background:url('{T_THEME_PATH}/images/midl.png');">

2. midm.png (1 x 80px) für den mittleren Teil (variable Breite)

Code: Alles auswählen

<td height="80" style="background:url('{T_THEME_PATH}/images/midm.png');">&nbsp;</td>

3. midr.png (470 x 80px) für den rechten Teil (feste Breite)

Code: Alles auswählen

<td width="470" height="80" align="right" valign="top" style="background:url('{T_THEME_PATH}/images/midr.png');">

[eXem3]

Ich hab die einfache Variante genommen und das Logo nun neu angepasst. Background Black und den Banner überarbeitet.

Dennoch ist das nun nicht die Lösung überhaupt, andere foren so wie:

http://www.phpbb9.de/phpbb-funktionen-t ... 20019.html

haben das auch irgend wie hin bekommen. Werd daran tüfteln, wenn ich die Lösung habe, werd ich sie posten.

Danke erstmal

[roum]

Was besonderes gezaubert hat der Ersteller der Seite auch nicht. Die Grafik ist halt stolze 1545px breit.
Dennoch wiederholt sie sich auf meinem Monitor ein gutes Stückchen. Ich hab mir allerdings auch erst vor wenigen Wochen nen neuen Monitor geholt weil der alte einfach kaputt gegangen ist.
Man kanns halt kaum allen recht machen. Die ganzen Widescreen TFTs werden ja immer größer und mein derzeit noch sehr breiter Monitor ist in 1-2 Jahren ein absolutes 0815 Gerät und viele haben dann wieder noch breitere Monitore