✔ Hintergrund in PS für's Web

[reddragon90]

Hallo Leute,

ich mache ein Web-Design mit PS. Nun habe ich aber eine Frage bzw. ein Problem. Ich habe eine Art sagen wir mal Kasten gemacht mit Schlagschatten. Wenn ich diesen Kasten der schon geslinct ist in meinem HTML Editor einfüge. Sieht der Schlagschatten nicht mehr gut aus. Jetzt frage ich mich wie ich es machen kann das ich in PS das Hintergrund Bild so einfüge das es in der HTML Datei die ganze Seite ausfüllt.

Kurz und knapp wie groß muss mein Arbeitsbereich sein? Damit die Datei als ganze Grafik angezeigt wird?

 

[muhkuh]

Um deine Frage kurz und knapp zu beantworten: Ne Standartlösung gibt es nicht. Du hast nur mehrere Möglichkeiten dem Problem zu begegnen.

Eine Möglichkeit - funktioniert meines Wissens aber nicht im IE - wäre die Bereiche, in denen ein transparenter Schlagschatten vorhanden ist als 24-Bit PNG zu speichern. Da ist es dann egal, ob der Hauptteil der Seite auf einem ungleichmäßig gestalteten Hintergrund hin- und herrutscht (wie es bei einem zentrierten Layout der Fall ist). Der Hintergrund kann dann kacheln wie er will.

Bei einem recht großflächigen Hintergrund in der horizontalen und vertikalen wäre es das einfachsten die Seite fest am linken Rand zu positionieren und das Kacheln des Hintergrunds mit

background-position: Xpx Ypx;

entsprechend zu positionieren. In dem Fall kannst du auch auf die 24-Bit PNGs verzichten, da du durch die exakte Positionierung des Hintergrunds einen sauberen Übergang schaffen kannst.

 

[reddragon90]

Musste ich das dann auch mit einem DIV machen? Sprich das Hintergrund Bild im Container einfügen?

 

[reddragon90]

Es funktioniert leider nicht. Wenn ich ein DIV erstelle dann sieht man Links Rechts Oben und Unten den weißen Rand.

 

[xXx_BaSStar_xXx]

.all {
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
}

versuche es mal so.

 

[reddragon90]

Es funktioniert nicht. Es liegt vielleicht auch daran. Weil die Grafik nicht so das einfache ist.
Also es ist so ein weißer strahl wie man ihn von den Flugzeugen kennt die ziemlich hoch fliegen. Und dieser Strahl soll auf der Page oben links/Mitte sein. Nur weiß ich jetzt halt nicht wie ich das Realisieren soll. Also so das der Strahl sich nicht wiederholt aber das der Rest der Page die Farbe des Himmels hat.

 

[xXx_BaSStar_xXx]

.strahl {
  margin:0px;
  top:0px;
  left:0px;
  background-position:left top;
  background-repeat: no-repeat;
}

Wie wäre es damit?

 

[reddragon90]

Hat nicht geklappt

 

[muhkuh]

Na, den Hintergrund musst du auch auf die Seite Andwenden, und nicht unbedingt in einen Container packen

body {
    background-image: url( relativer/pfad/zum/bild.gif );
    background-position: Xpx Ypx;
    background-repeat: repeat-x;
    background-color: #333;
}

Vielleicht hilft es, wenn du einfach mal die Photoshop-Datei hier postest, oder eine Skizze von dem, was du erreichen möchtest.

PS: Dass du Randstreifen hast, leigt womöglich daran, dass du das Margin der Website nicht auf 0 gestellt hast. Standartmäßig wird dafür meines Erachtes ein Wert zwischen 20 und 30 Pixeln angenommen

body {
    margin: 0;
}

 

[Maik]

Hi,

da sich das Thema anscheinend mehr mit CSS als mit Photoshop beschäftigt, wird es dem passenden Board zugeführt.

@reddragon90: Vielleicht solltest du mal den Quellcode (HTML + CSS) und die Grafik zeigen, damit man hier nicht im Trüben fischt.