Hintergrund Grafik Automatisch am Monitor anpassen! Aber wie?

[bo2221]

Ich brauche mal nen denk Anstoß

Eigentlich erstelle ich nur Grafiken und habe mich mal für meine Band an einer Webseite versucht erstellt habe ich sie in Photoshop

Folgendes Problem ich sehe jetzt den Background aber nicht da wo ich ihn hin haben möchte. Also im Bild sieht man ja nen Content Bereich
der soll mittig vom Monitor sein und der Rest soll sich je nach Monitorgröße anpassen also Runter scrollen kann man nur nicht nach links und rechts. Das soll Automatisch passieren je nachdem wie groß der Monitor ist.

Ich hoffe mir kann da wer weiter helfen

hier die Website bis jetzt: www.diary-of-the-unknown.de

 

[threadi]

Was hat eine Webseite mit Monitoren zu tun? Was machen Laptop-Nutzer? Einen Monitor anschließen?

Wieso ich das frage? Webseiten passt man an Viewports an - niemals an Monitore oder gar Auflösungen.

Wenn Du ein Design an einen Viewport anpassen willst sind hinsichtlich Grafiken, besonders so großen, ab und zu noch Grenzen gesetzt.

Bevor Du das angehst solltest Du dir aber dringend sauberen HTML-Code angewöhnen. Dein aktueller Entwurf hat z.B. keinen Doctype, weshalb jeder Browser den Code anders interpretieren wird. Wenn Du es in deinem Browser für dich "richtig" siehst, ist es lange nicht korrekt und in jedem anderen Browser auch so. Du brauchst einen Doctype.

Leider sperrt deine Seite den Zugriff des HTML-Validators, das solltest Du selbst hinbiegen damit Du damit arbeiten kannst:
Validation Results - W3C Markup Validator

Ein viel größeres Problem als der Doctype ist jedoch das falsch angewendete Tabellenlayout der Webseite. Mit diesem wirst Du das Design niemals sauber umsetzen können. Dafür brauchst Du viel einfacher gestrickten HTML-Code, zur Not mit <div>-Elementen zur Gruppierung.

Klingt jetzt nach viel Arbeit für dich - aber es lohnt sich. Wenn Du die gesamte Seite mal ordentlich schreibst, kannst Du auch deinen Wunsch nach einem Hintergrundbild, welches sich an den Viewport anpasst, realisieren. So wie es jetzt aussieht geht das nicht.

 

[bo2221]

Hm deswegen frag ich ja wie kann ich sowas realisieren? Vielleicht nen Tutorial oder so. Ich könnte es auch mit einer kompletten Hintergrund Grafik machen, aber das möchte ich nicht weil das laden dann zu lange dauert deswegen auch die einzelnen Bilder

EDIT: was meinst du mit Doctype?

Und du meinst ich soll die einzelnen Bilder lieber mit divs anordnen als mit Tabellen? Dann werde ich das mal morgen ausprobieren, aber dann habe ich immer noch nicht mein eigentliches Problem gelöst. Ich möchte halt das Bild so im Hintergrund haben wie man es sieht mit den einzelnen Bildern.

 

[prm]

Mit einigen Nachteilen behaftet ist diese Lösung.

 

[bo2221]

Danke aber das ist nicht so recht was ich suche. Ich glaube ih habe mich da falsch ausgedrückt. Hm wie kann ich das am besten beschreiben. Ich habe ja bewußt eine große grafik gewählt damit man auf größeren Bildschirmen links und rechts noch was sieht. Ich möchte eigentlich nur das das weiße wenn ich die webseite aufrufe in der mitte ist und nicht linksbündig angezeigt wird.

Ich sollte glaube ich erstmal mit einer hintergrund grafik anfangen, das verwirrt mich nur so wie ich es jetzt habe.

 

[prm]

Mal ein ganz anderer Ansatz:
Weshalb hast du die Grafik so vielfach gesliced und wozu ist die Tabelle gut?
Photoshop ist ein Grafikprogramm und somit für Websites das grundsätzlich falsche Werkzeug.

Ich würde so vorgehen:
Mach eine Grafik, auf der links und rechts das Menneken noch drauf ist. Packe diese als Hintergrundgrafik in einen div und zentriere diesen horizontal.
Dem body oder html weist du dann diese rot schwarz Marmorierung zu.

Etwas Basics in HTML und CSS könnte auch nicht schaden ;-)

 

[bo2221]

Ich habe das gemacht damit mir keiner die grafik klaut und ich der meinung bin das viele kleine bilder scheller geladen werden als eine große.

Die Tabelle hat mir Potoshop ausgegeben. Aber der rote Hintergrund ist ja passent zum weissen Content in der mitte den kann ich ja nicht einfach irgendwo hin setzen. Ich glaub ihr versteht mich falsc

Ich versuch nachher mal mein glück

 

[bo2221]

So kann da jetzt nochmal jemand drüber schauen habe es jetzt mit einer Grafik gemacht und habe jetzt den Effekt so wie ich es haben möchte und das total simple, man bin ich doof hehe.

macht es den kein Problem so eine große Grafik als Hintergrund zu nehmen?

 

[Liskel]

macht es den kein Problem so eine große Grafik als Hintergrund zu nehmen?

Größe im Sinne der Pixel dürfte nichts ausmachen, außer dass Besucher mit kleinem Viewport irgendwann horizontal scrollen müssen. Obwohl das bei dir durch die zentrierte Darstellung und den kleinen "Textbereich" wirklich kein Problem darstellt!
350kb für das Hintergrundbild sind nicht wenig. Mit DSL auf jeden Fall machbar, aber angenommen, du hast eine Downloadrate von 100kb/sek, dann dauert das Hintergrundbild alleine schon 3,5Sekunden zu laden. Ungünstig.
Vielleicht kannst du das jpg noch ein wenig komprimieren (etwas schlechtere Qualität beim Exportieren -> bis 75% sind imho keine Unterschiede erkennbar).

 

[bo2221]

die Quallität habe ich schon runter gestellt mehr geht leider nicht. Deswegen wollte ich es ja auch eigentlich mit vielen kleinen Bildern machen damit es schneller geladen wird

 

[bo2221]

Ich will ja nicht nerven könnte mal einer über die Seite schauen? Irgendwie bekomme ich das nicht richtig hin mit dem content und einer sidebar und dann muß auch noch nen footer gesetzt werden. Irgendwas mach ich da falsch

Und noch was wie bekomme ich das hin das meine Seite validiert werden kann was ist das Problem?

 

[lascaux]

<div id="background">
  <img src="dein-bild.jpg" alt="irgendwas" />
</div>

und im CSS-Teil

#background {
  height: 100%;
  width: 100%;
  position: fixed; /* wichtig, sonst scrollt das Bild mit! Wenn es scrollen soll, nimm absolute */
  z-index: -1000; /* damit das Bild auch in den Hintergrund geht, -10 reicht u.a. auch, aber ich nehm einfach mal 1000 */
}

#background img {
  width: 100%;
}

Soweit fertig.

Jetzt stell ich dir aber noch ein paar Hindernisse in den Weg, da dieser dynamische Hintergrund mehr Schattenseiten hat, als einem lieb ist.


Problem 1:
Angenommen, dein Bild ist 1200*900 groß. Auf kleineren Bildschirmen wird es gut skaliert. Jetzt kommt aber einer mit einem einer Auflösung von 1900*1200 daher. Da dein Bild aber wesentlich kleiner ist, wird es gestreckt. Das sieht am Ende richtig bescheuert aus.

Problem 2:
Du hast dein Bild auf die maximale Bildschirm-Auflösung erstellt. Somit hat es dann zB 900kB oder sogar noch größer. Leute, die mit kleineren Auflösungen (und somit kleinere Browserfenster haben), müssen die vollen 900kB runterladen.

Problem 3:
Die Höhe von deinem Bild. Ich habe zwar nur angegeben, dass die Breite angepasst wird, somit ändert sich die Höhe auch automatisch. Viele haben eine Auflösung von 4:3, andere eine von 16:9 und wieder andere haben wieder was ganz anderes. Es entstehen somit Lücken am oberen und unteren Teil deines Bildes.

Man kann die 3 Punkte zwar mit Javascript lösen, aber da du nicht einmal das kleine Problem mit der Anpassung an den Browser-Inhalt hin bekommst, wirst du es mit Javascript auch nicht hinbekommen. Ein Lösung mit einem Modal-Effekt wäre da die absolute Lösung, aber das beinhaltet wieder Javascript.