Hintergrundbild für Webseite anpassen

philiAN · 08.11.2008

Schönen Guten Abend allerseits,

ich helfe einem Freund von mir bei seinem Onlineshop und habe dazu noch eine Idee, die ich leider nicht ganz umgesetzt bekomme und daher auf eure Hilfe angewiesen bin.

So, es geht um, wie im Titel schon beschrieben, ein Hintergrundbild für die Webseite.

Ich habe mir folgendes vorgestellt als Hintergrund:

Und so soll es mit der Webseite aussehen:

Zur Website:

Der Onlineshop ist von Mallux, falls euch das weiter hilft. Ich weiss nämlich nicht, ob das was ich vorhabe Realisierbar ist.
Momentan ist der Hintergrund einfach nur Schwarz.

Wie pass ich das an einer Webseite an?

1. Soll der Schwarze Hintergrund der länge des Onlineshops entsprechen.(beim herunterscrollen)

2. Welche Auflösung muss ich benutzen in Photoshop CS3?

3. Ich benutze eine Auflösung von 1600x1080 auf einem Brightscreen-TFT.
Wenn nun jemand eine Auflösung von 1024x786 verwendest müsste er ja nach links und rechts scrollen, dass soll natürlich nicht Sinn der Sache sein.

Habt ihr evtl. passende Tutorials? Ich habe leider bisher noch nicht das passende gefunden.

Bin noch was am PC, daher falls ihr noch Fragen an mich haben solltet, könnt ihr diese gerne stellen.

Gruss

Philipp

tiroler · 08.11.2008

AW: Hintergrundbild für Webseite anpassen

falscher forumsbereich- admin bitte verschieben.

stb_87 · 09.11.2008

AW: Hintergrundbild für Webseite anpassen

Empfehlenswert wäre eine Breite von ca. 100px - das passt erfahrungsgemäß immer.

Für die Höhe machst du einfach keine Angaben, wird dann automatisch vorgenommen. Wenn das ein eh nur ein schwarzer Hintergrund wird, kannst du den auch im CSS definieren und benötigst dementsprechend keine extra Grafik dafür.

Herr_D · 09.11.2008

AW: Hintergrundbild für Webseite anpassen

Du mußt doch nur wissen, wie breit dein Inhalt sein soll (100px wären ein wenig mager

)

Für diesen baust du dann das Hintergrundbild... dieses positionierst du per css oben (15%) mittig und machst es background-attachment:fixed

Edith sagt: Wenn du deinem Inhalt eine(n) Hintergrund(farbe) zuordnest, dann kannst du das Hintergrundbild für die Gesamtseite auf die Engel beschränken...

Beispiel (Einfach mal den Quellcode ansehen):

http://whaa.de/dde/volles_brett.html

stb_87 · 09.11.2008

AW: Hintergrundbild für Webseite anpassen

Herr_D schrieb:
Du mußt doch nur wissen, wie breit dein Inhalt sein soll (100px wären ein wenig mager )

Ich meinte natürlich 1000px...

philiAN · 09.11.2008

AW: Hintergrundbild für Webseite anpassen

Vielen Dank für eure Hilfe,

so hatte ich mir das vorgestellt, nur ohne jeglichen Text.

Ich hab mir den Quelltext angeguckt und muss leider gestehen, dass ich überhaupt nicht durchblicke.

Evtl. lasse ich es doch besser mit der Grafik, ist mir zu Hoch.

Also, ich hab in dem Onlineshop über Einstellungen/Impressum die Möglichkeit etwas in die Kopfzeile des Shops einzutragen. Dort hatte ich mal diesen Code eingetragen:


<style type="text/css">
table.mytable { width:975px;}
</style>

Um den body(?) mittig zu fixieren.

Wie müsste denn der Code aussehen, wenn ich den Hintergrund in der Mitte nur Schwarz haben will, der aber in der vertikalen variiert und rechts und links einfach weiss, von mir aus fest fixiert.

Also wie in dem Bild nur ohne die Grafik.

Vielen Dank

Philipp

Herr_D · 09.11.2008

AW: Hintergrundbild für Webseite anpassen

philiAN schrieb:
Vielen Dank für eure Hilfe,

so hatte ich mir das vorgestellt, nur ohne jeglichen Text.

Ich hab mir den Quelltext angeguckt und muss leider gestehen, dass ich überhaupt nicht durchblicke.

Evtl. lasse ich es doch besser mit der Grafik, ist mir zu Hoch.

Also, ich hab in dem Onlineshop über Einstellungen/Impressum die Möglichkeit etwas in die Kopfzeile des Shops einzutragen. Dort hatte ich mal diesen Code eingetragen:


<style type="text/css">
table.mytable { width:975px;}
</style>

Um den body(?) mittig zu fixieren.

Nö... das zentriert nix... gibt lediglich einer Tabelle die Breite von 975px

philiAN schrieb:
Wie müsste denn der Code aussehen, wenn ich den Hintergrund in der Mitte nur Schwarz haben will, der aber in der vertikalen variiert und rechts und links einfach weiss, von mir aus fest fixiert.

Also wie in dem Bild nur ohne die Grafik.

Vielen Dank

Philipp

Na ja, kommt drauf an, was u beeinflussen kannst in deinem Onlineshop

Wenn du einfluß aufs css hast dann per css dem Browser befehlen, dass er Inhalte seitenzentriert anzeigen soll:

Code:

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

body {
bacxkground-color: #ffffff; /* weisse Hintergrundfarbe außen */
text-align: center; /* Zentrierung für alte Browser */
}


/* wenn das der angezeigte Bereich ist */

table.mytable { 
width:975px;
text-align:left;
margin:0 auto; /* Zentrierung für moderne Browser */
background-color:#000000; /* Hintergrundfarbe innerer Bereich */
color: #ffffff;
}

-->
</style>

Aber ohne die Seite zu kennen, ist alles nur Vermutung...

philiAN · 09.11.2008

AW: Hintergrundbild für Webseite anpassen

Hallo,

danke dir Herr_D, um deine Bemühung.

Es geht um folgenden Shop: MX-Olnineshop der Motorradshop, Sascha Esser - Kalkar, Motocrossshop

Ich hatte gerade deinen Code kopiert und in der Kopfzeile eingefügt, natürlich meinen zuerst gelöscht.

Also es hat sich nichts geändert.

Herr_D · 09.11.2008

AW: Hintergrundbild für Webseite anpassen

An die Stelle, wo du den Code eingebaut hast, gehört er leider nicht... aber wahrscheinlich geht das bei dem Fertigsystem nicht anders...

Mein Code war falsch (hab mich verschrieben

)

Da deine Seite ziemlich müllig gecodet wurde, müssen wir wohl zu härteren Mitteln greifen:

Probier mal folgenden Code:

Code:

<style type="text/css">
<!--

body {
background-color: #ffffff ! important; /* weisse Hintergrundfarbe außen */
text-align: center! important; /* Zentrierung für alte Browser */
}


table.mytable {
width:975px ! important;
text-align:left ! important;
margin:0 auto ! important; /* Zentrierung für moderne Browser */
background-color:#000000 ! important; /* Hintergrundfarbe innerer Bereich */

}

-->
</style>

Llynyania · 09.11.2008

AW: Hintergrundbild für Webseite anpassen

Hi also ich seh da noch was:
<body bgcolor="000000" text="#000000" vlink="#000000" alink="#000000" link="#000000>

sollte man entfernen und der neue style steht innerhalb des Body - das ist natürlich falsch, der muß rauf zu den andern Anweisungen. Da gibts auch schon eine Body-Anweisung...

sortiert sieht das so aus:

<style type="text/css">
</style>

Da sollte schon was passieren - und nicht vergessen den style der grad noch unten unter <body... steht - raus

Llyn

philiAN · 09.11.2008

AW: Hintergrundbild für Webseite anpassen

Hallo,

herzlichen Dank euch allen, hatte den Code von Herr_D probiert und es hat funktioniert - Super.

Damit es komplett bündig ist hatte ich die width noch auf 978 erhöht.

Dann funktioniert ja evtl. doch meine erste Idee mit den 2 kleinen Teufeln an den Seiten.

Was müsste ich denn da noch in den Code einfügen und wie müsste ich die Grafiken in Photoshop bearbeiten? Da kommen mir nämlich schon wieder ein paar fragen auf.

Und zwar:
Welche Auflösung muss die Grafik haben?
Ist die Grafik ein- oder zweiteilig?
Was ist bei Usern die einen normalen CRT-Monitor haben mit bspw. 1024x... Auflösung? Müssen die dann nach Horizontal scrollen?
Und und und..

Vielen Dank!!

Philipp

Herr_D · 09.11.2008

AW: Hintergrundbild für Webseite anpassen

philiAN schrieb:
Damit es komplett bündig ist hatte ich die width noch auf 978 erhöht.

Wenn du die Grafik irgendwo hochladen kannst, dürfte das kein Problem sein...

1. Grafik:

Neue Datei erstellen (Photoshop) -> Hintergrund weiß

Breite: Tabellenbreite (978px) + Teufelbreite rechts + Engelbreite links (oder wie auch immer

+ 50px an jeder Seite

Höhe: n kleines bißchen höher als die Figuren...

Dieser Schritt dient nur zur Lagebestimmung, ist eigentlcih nicht nötig
Strg Shift N -> Strg a -> Auswahl -> Auswahl transformieren -> Mittelpunkt behalten, Breite 978px -> ok

Auswahl mit Schwarz füllen -> Auswahl aufheben...

Jetzt kannste neben dem Feld die Figuren plazieren

Datei für Web speichern

Jetzt haste ne Grafik, die du als Hintergrund einbaust:

Dazu mußt du sie positionieren: du änderst den Code von oben wie folgt:

Code:

<style type="text/css">
<!--

body {
background-color: #ffffff ! important; /* weisse Hintergrundfarbe außen */
text-align: center! important; /* Zentrierung für alte Browser */
[B]background-image: url(teufel_bg2.jpg) ! important;
background-position:bottom center ! important;
background-repeat:no-repeat ! important;
background-attachment:fixed ! important;[/B]

}


table.mytable {
width:978px ! important;
text-align:left ! important;
margin:0 auto ! important; /* Zentrierung für moderne Browser */
background-color:#000000 ! important; /* Hintergrundfarbe innerer Bereich */

}

-->
</style>

Die roten Sachen mußt du anpassen:

background-image: url(teufel_bg2.jpg); <--- hier muß natürlich die richtige Adresse hin

background-position:bottom center; ist die Lage von oben (in diesem Fall von unten) ... je nach dem wo du die Engel hinhaben willst, tauscht du bottom durch top (oben) center (Mitte der Seite) oder einen 100px bzw. 15% Wert (Abstand von oben) aus

Bei Usern mit kleineren Auflösungen wird nicht quergescrollt, die sehen die Bilder nur nicht oder vielleicht auch nur halb...

philiAN · 09.11.2008

AW: Hintergrundbild für Webseite anpassen

Hallo,

super - so eine Anleitung habe ich gebraucht :-D

Ich werde mich Morgen mal dahinter setzen und das mal machen.

Ich kann dir nicht genug danken, deshalb nocheinmal - Herzlichen Dank!

Gruss

Philipp