Wie optimiere ich eingebette Bilder im HTML, Position etc...?

... komplette Frage anzeigen

2 Antworten

Ich arbeite mit notepad ++ und mit divs.

Wenn du es vernünftig machen willst, gleich mit den neuen semantischen Elementen wie header, main, footer, section, aside und Co. arbeiten. Aber das nur so nebenbei. ;-)

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.

Dein Hintergrundbild über CSS als background zuweisen. Dort kannst du dann auch das Verhalten über background-size steuern. Die anderen Elemente liegen so automatisch über deinem Hintergrund. Du musst so nicht mit position und z-index arbeiten.  

<header role="banner">
    <h1 class="branding">Logo</h1>
    <nav role="navigation">
        <ul>
            <li><a href="">menue-item</a></li>
            <li><a href="">menue-item</a></li>
       </ul>
    </nav>
</header> 

Dem header-Element die Hintergrundgrafik dann über CSS zuweisen. 

LG medmonk 

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von wroar
16.05.2016, 15:06

medmonk, vielen Dank für deine schnelle Antwort. Allerdings wird mir nun kein Bild mehr angezeigt. 

Meine HTML Datei: 

http://pastebin.com/VhQHg9UE


CSS:


body {
background-color: black;
}

#portfolio {


}

#header {
margin-left: 25px;
margin-top: 25px;
width: 980px;
height: 150px;
}

#top {
background-image: url(homepage_test\img\cover.png);
text-align: center;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;

}


0

medmonks Antwort ist schon gut und um das noch zu ergänzen: 

Es gibt in CSS noch einen z-index parameter. Das ist quasi die Koordinatenachse die aus dem Bildschirm wandert. Damit kann man Bilder übereinanderlegen wie zB. bei Photoshop mit Ebenen. 

also zB. 

#imgHead1 {
  z-index: -1;
}

#imgHead2 {
  z-index: 0; // 0 ist der Standardwert
}
Antwort bewerten Vielen Dank für Deine Bewertung