PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Hintergrundbild für Webseite anpassen
Beitrag
<blockquote data-quote="Herr_D" data-source="post: 759776" data-attributes="member: 7203"><p><strong>AW: Hintergrundbild für Webseite anpassen</strong></p><p></p><p></p><p></p><p>Wenn du die Grafik irgendwo hochladen kannst, dürfte das kein Problem sein...</p><p></p><p></p><p>1. Grafik:</p><p></p><p></p><p>Neue Datei erstellen (Photoshop) -> Hintergrund weiß</p><p></p><p>Breite: Tabellenbreite (978px) + Teufelbreite rechts + Engelbreite links (oder wie auch immer <img src="/styles/default/xenforo/smilies/zwinker.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /> + 50px an jeder Seite</p><p></p><p>Höhe: n kleines bißchen höher als die Figuren...</p><p></p><p>Dieser Schritt dient nur zur Lagebestimmung, ist eigentlcih nicht nötig</p><p>Strg Shift N -> Strg a -> Auswahl -> Auswahl transformieren -> Mittelpunkt behalten, Breite 978px -> ok</p><p></p><p>Auswahl mit Schwarz füllen -> Auswahl aufheben... </p><p></p><p></p><p>Jetzt kannste neben dem Feld die Figuren plazieren</p><p></p><p></p><p></p><p>Datei für Web speichern </p><p></p><p></p><p></p><p></p><p>Jetzt haste ne Grafik, die du als Hintergrund einbaust:</p><p></p><p></p><p></p><p>Dazu mußt du sie positionieren: du änderst den Code von oben wie folgt:</p><p></p><p></p><p>[code]</p><p><style type="text/css"></p><p><!--</p><p></p><p>body {</p><p>background-color: #ffffff ! important; /* weisse Hintergrundfarbe außen */</p><p>text-align: center! important; /* Zentrierung für alte Browser */</p><p>[B]background-image: url(teufel_bg2.jpg) ! important;</p><p>background-position:bottom center ! important;</p><p>background-repeat:no-repeat ! important;</p><p>background-attachment:fixed ! important;[/B]</p><p></p><p>}</p><p></p><p></p><p>table.mytable {</p><p>width:978px ! important;</p><p>text-align:left ! important;</p><p>margin:0 auto ! important; /* Zentrierung für moderne Browser */</p><p>background-color:#000000 ! important; /* Hintergrundfarbe innerer Bereich */</p><p></p><p>}</p><p></p><p>--></p><p></style></p><p></p><p></p><p>[/code]</p><p></p><p></p><p></p><p>Die roten Sachen mußt du anpassen:</p><p></p><p>background-image: url(<span style="color: Red"><strong>teufel_bg2.jpg</strong></span>); <--- hier muß natürlich die richtige Adresse hin</p><p></p><p>background-position:<strong><span style="color: Red">bottom</span></strong> 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</p><p></p><p></p><p></p><p>Bei Usern mit kleineren Auflösungen wird nicht quergescrollt, die sehen die Bilder nur nicht oder vielleicht auch nur halb...</p></blockquote><p></p>
[QUOTE="Herr_D, post: 759776, member: 7203"] [b]AW: Hintergrundbild für Webseite anpassen[/b] 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> [/code] Die roten Sachen mußt du anpassen: background-image: url([COLOR="Red"][B]teufel_bg2.jpg[/B][/COLOR]); <--- hier muß natürlich die richtige Adresse hin background-position:[B][COLOR="Red"]bottom[/COLOR][/B] 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... [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Hintergrundbild für Webseite anpassen
Oben