Problem: Hintergrundgrafik strecken und Grafik darüber

divcre · 12.02.2008, 13:41

Hallo Leute,

ich möchte meine HP erstellen und habe nun eine 900*900px Grafik erzeugt als Hintergrund. Diese will ich strecken, damit sie sich dem Browser anpasst darüber soll nun eine halbtransparente Graugrafik (welche eine feste Breite haben soll), auf der ich dann Texte, Bilder, Links etc stelle, sozusagen meine Arbeitsfläche. Um sich das besser vorzustellen:

www.divine-creature.de/neu/try3Kopie.jpg

Habe ich mit Photoshop gezaubert. Mein primäres Problem ist halt das Strecken. Wiederholen funktioniert nicht, da in der Mitte der Lichtkegel sein soll und man sonst übergänge etc sieht....

mogidala · 12.02.2008, 14:00

Hallo,

anstatt zu strecken könntest du auch anders vorgehen (erfordert aber etwas fummelei und ein zusätzliches div).

Im prinzip so: Du hast dein Hintergrund Bild, davon nimmst du die unteren X Pixel (X= Höhe des Musters) und erstellst ein neues Bild daraus. Dieses packst du dann ein ein weiteres div als BG und setzt background-repeat auf repeat-y.

Ob du nun dieses neue Div noch hinter das andere packst oder unten drunter ist dir selbst überlassen - wobei so große hintergrundbilder eigentlich nicht optimal sind - lass besser diesen lichtkegel weg und mach das hintergrundbid entsprechend kleiner und repeate es - der Besucher lädt jetzt schon über 200kb an deiner "Seite" ohne dass überhaupt irgendwelche Informationen angezeigt werden, sondern nur das Hintergrundbild...

MichaelM · 12.02.2008, 16:10

ich würde insgesamt 1 Div nehmen und jeweils wie vorher schon gesagt
mit dem Hintergrund füllen. Einfach oben abschneiden z.b. 900 x 10 pixel
und abspeichern.
Strecken bei verschiedenen Bildschirmauflösungen reißt die Pixel auseinander.

divcre · 12.02.2008, 17:01

hm...

ich habe mich ein wenig hier: http://www.lichtreize.com/LichtReize...me%26News.html orientiert. Ich möchte die Seite auch nicht kopieren, bevor hier jemand sowas denkt, nur finde ich die technische Umsetzung doch sehr brilliant.

Ich frage mich nur, wie er - a) aus diesem Hintergrund:

http://www.lichtreize.com/LichtReize..._spotlight.jpg

nachher den hinkriegt, den man normal sieht. Bei mir kommt da nur Pixelbrei raus. Ich peils einfach nicht.

und - b) solche Bilder datentechnisch so klein kriegt. Meine werden dann werden dann frisch aus Photoshop immer so 150 kb oder mehr. Würde ich so'n 82kb Bild machen sähe es komprimiert ohne Ende aus.

Vielleicht könnt ihr mir da ja mal helfen?

mogidala · 12.02.2008, 17:07

Zitat:

Zitat von divcre

hm...

Ich frage mich nur, wie er - a) aus diesem Hintergrund:

http://www.lichtreize.com/LichtReize..._spotlight.jpg

nachher den hinkriegt, den man normal sieht. Bei mir kommt da nur Pixelbrei raus. Ich peils einfach nicht.

So wie ich es gesagt habe: http://www.lichtreize.com/LichtReize...ray_bg_c-1.jpg

Und zur Dateigröße, deine ist 900x900, seine 700x700, das sind allein schon 32.0000 Pixel weniger. Wenn ich dein Bild in Photoshop auf 700px skaliere, sinds auch nur noch knapp 100kb.

MichaelM · 12.02.2008, 17:35

Habe Dir mal ein Beispiel gemacht mit CSS und der geschnittenen Grafik die
auf y wiederholt wird

http://www.mikel-mueller.de/test.html

und hier die geschnittene Grafik für den Hintergrund:

http://www.mikel-mueller.de/_images/hg3.jpg

divcre · 14.02.2008, 00:05

Hey Leute,

danke für Eure Tipps. Einiges hat mir doch geholfen. Ich bastel jetzt fieberhaft und die Seite sieht schon besser aus. Auch wenn cih sagen muss, dass der Dreamweaver es mir in Sachen Benutzerfreundlichkeit nicht grade leicht macht.

Hab damit ja schon mal gezaubert aber is schon so'n Jahr her und ich hab mir beim Framenamen setzen grade einen abgebrochen, aber nu gehts =)