[ERLEDIGT] eingebettete Bilder optimieren

[kajo]

Guten Tag,

ich bin derzeit am HTML lernen um mir eine schlichte Portfolio Homepage zu erstellen, allerdings habe ich auch schon die erste Probleme.

1) Ich krieg mein großes Hintergrund welches 1920px breit ist, nicht "randlos" sprich, ich muss bisschen nach rechts scrollen, damit der ganze Bildschirm damit gefühlt ist - löse ich das mit Margin-left: -10px; ? oder gibt es eine andere Methode, die automatische das Bild komplett links einfügt?

2) Ich krieg mein Logo nicht über das Bild, also es sind zwei Bilder, einmal das Große und dann das Logo, wie bekomme ich nun das Logo auf das Hintergrundbild.

Beispiel: http://i.epvpimg.com/RfVie.png

Allerdings ist das Große Bild nur 600px hoch (also soll das Bild nicht die komplette Webseite darstellen, sondern nur als Header nur im Hintergrund, damit links nebem den Logo noch eine Navigation eingefügt wird..)

Ich arbeite mit notepad ++ und mit divs.

Hoffe mir kann jemand helfen. :)

 

[SpiceLab]

1) Ich krieg mein großes Hintergrund welches 1920px breit ist, nicht "randlos" sprich, ich muss bisschen nach rechts scrollen, damit der ganze Bildschirm damit gefühlt ist - löse ich das mit Margin-left: -10px; ? oder gibt es eine andere Methode, die automatische das Bild komplett links einfügt?

html,body {margin:0}

2) Ich krieg mein Logo nicht über das Bild, also es sind zwei Bilder, einmal das Große und dann das Logo, wie bekomme ich nun das Logo auf das Hintergrundbild.

Beispiel: http://i.epvpimg.com/RfVie.png

Allerdings ist das Große Bild nur 600px hoch (also soll das Bild nicht die komplette Webseite darstellen, sondern nur als Header nur im Hintergrund, damit links nebem den Logo noch eine Navigation eingefügt wird..)

Bitte den aktuellen HTML- u. CSS-Code zeigen, oder auf https://jsfiddle.net demonstrieren, damit man sich zu der Konstellation überhaupt näher äußern kann.

 

[kajo]

Hallo,

ich habe nun die Codes hochgeladen:
https://jsfiddle.net/u5otdrar/

Zwar erkennt man jetzt nichts, da die Bilder nicht dabei sind auch habe ich gerade versucht in der CSS Datei, das "cover" Bild als Hintergrund zu nehmen, allerdings ist das Bild dann verschwunden.

Was ich ungefähr vorhabe: http://i.epvpimg.com/Jf6oh.png (der restliche Content ist nicht im oben aufgeliste Code integriert, das ist auch nicht das Problem)

 

[SpiceLab]

Warum nutzt Du das Logo nicht einfach als Hintergrundbild für #header, und richtest den Inhalt (Links) rechtsbündig aus?

Oder Du greifst auf das Flexbox-Modell (siehe z.B. https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/) zurück, um zwei Spalten für Logo und Links einzurichten.

 

[kajo]

Weil ich gern das Logo (Bild) auf die Startseite verlinken möchte, und nicht das ganze Hintergrundbild.

Logo 2. Ebene (verlinkt)
Hintergrund 1. Ebene (nicht verlinkt)

 

[SpiceLab]

Bleibt Option 2 im Rennen: Flexbox.

 

[kajo]

das Problem wäre gelöst.