Anzeige

Hintergrundbild für Webseite anpassen

Hintergrundbild für Webseite anpassen | PSD-Tutorials.de

Erstellt von philiAN, 08.11.2008.

  1. philiAN

    philiAN Guest

    Hintergrundbild für Webseite anpassen
    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:

    [​IMG]


    Und so soll es mit der Webseite aussehen:

    [​IMG]

    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
     
    Zuletzt von einem Moderator bearbeitet: 08.11.2008
    #1      
  2. tiroler

    tiroler Hat es drauf

    14
    Dabei seit:
    04.11.2006
    Beiträge:
    2.202
    Geschlecht:
    männlich
    Ort:
    Pfalz und Tirol
    Software:
    CS4, C4D R10
    Kameratyp:
    Canon EOS 400D+L-Obj.
    Hintergrundbild für Webseite anpassen
    AW: Hintergrundbild für Webseite anpassen

    falscher forumsbereich- admin bitte verschieben.
     
    #2      
  3. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Hintergrundbild für Webseite anpassen
    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.
     
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Hintergrundbild für Webseite anpassen
    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
     
    Zuletzt bearbeitet: 09.11.2008
    #4      
  5. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Hintergrundbild für Webseite anpassen
    AW: Hintergrundbild für Webseite anpassen

    Ich meinte natürlich 1000px... :D
     
    #5      
  6. philiAN

    philiAN Guest

    Hintergrundbild für Webseite anpassen
    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
     
    #6      
  7. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Hintergrundbild für Webseite anpassen
    AW: Hintergrundbild für Webseite anpassen


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





    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 (Text):
    1.  
    2. <style type="text/css">
    3. <!--
    4. * {
    5. margin:0;
    6. padding:0;
    7. }
    8.  
    9. body {
    10. bacxkground-color: #ffffff; /* weisse Hintergrundfarbe außen */
    11. text-align: center; /* Zentrierung für alte Browser */
    12. }
    13.  
    14.  
    15. /* wenn das der angezeigte Bereich ist */
    16.  
    17. table.mytable {
    18. width:975px;
    19. text-align:left;
    20. margin:0 auto; /* Zentrierung für moderne Browser */
    21. background-color:#000000; /* Hintergrundfarbe innerer Bereich */
    22. color: #ffffff;
    23. }
    24.  
    25. -->
    26. </style>
    27.  
    28.  



    Aber ohne die Seite zu kennen, ist alles nur Vermutung...
     
    Zuletzt bearbeitet: 09.11.2008
    #7      
  8. philiAN

    philiAN Guest

    Hintergrundbild für Webseite anpassen
    #8      
  9. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Hintergrundbild für Webseite anpassen
    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 (Text):
    1.  
    2. <style type="text/css">
    3. <!--
    4.  
    5. body {
    6. background-color: #ffffff ! important; /* weisse Hintergrundfarbe außen */
    7. text-align: center! important; /* Zentrierung für alte Browser */
    8. }
    9.  
    10.  
    11. table.mytable {
    12. width:975px ! important;
    13. text-align:left ! important;
    14. margin:0 auto ! important; /* Zentrierung für moderne Browser */
    15. background-color:#000000 ! important; /* Hintergrundfarbe innerer Bereich */
    16.  
    17. }
    18.  
    19. -->
    20. </style>
    21.  
    22.  
     
    #9      
  10. Llynyania

    Llynyania Benutzertitel aberkannt

    Dabei seit:
    12.08.2008
    Beiträge:
    208
    Geschlecht:
    weiblich
    Kameratyp:
    Nikon D2Xs, Canon400D
    Hintergrundbild für Webseite anpassen
    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">
    <!--
    * {
    margin:0;
    padding:0;
    }
    body { font-family: Arial, Helvetica, sans-serif;
    background-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;
    }


    a:link { color:#000000; }
    a:visited { color:#000000; }
    a:active { color:#000000; }
    a:hover { color:#CD0000; }
    td { color:#000000; }
    --></style>

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

    Llyn
     
    #10      
  11. philiAN

    philiAN Guest

    Hintergrundbild für Webseite anpassen
    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
     
    #11      
  12. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Hintergrundbild für Webseite anpassen
    AW: Hintergrundbild für Webseite anpassen

    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 (Text):
    1.  
    2. <style type="text/css">
    3. <!--
    4.  
    5. body {
    6. background-color: #ffffff ! important; /* weisse Hintergrundfarbe außen */
    7. text-align: center! important; /* Zentrierung für alte Browser */
    8. [B]background-image: url(teufel_bg2.jpg) ! important;
    9. background-position:bottom center ! important;
    10. background-repeat:no-repeat ! important;
    11. background-attachment:fixed ! important;[/B]
    12.  
    13. }
    14.  
    15.  
    16. table.mytable {
    17. width:978px ! important;
    18. text-align:left ! important;
    19. margin:0 auto ! important; /* Zentrierung für moderne Browser */
    20. background-color:#000000 ! important; /* Hintergrundfarbe innerer Bereich */
    21.  
    22. }
    23.  
    24. -->
    25. </style>
    26.  
    27.  
    28.  


    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...
     
    Zuletzt bearbeitet: 09.11.2008
    #12      
  13. philiAN

    philiAN Guest

    Hintergrundbild für Webseite anpassen
    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
     
    #13      
x
×
×
teststefan