HTML CSS Bilder übereinander legen

3 Antworten

medmonk
15.01.2015, 22:19

Du brauchst keine absolute Positionierungen samt z-index! Pack um dein oben liegendes Bild eine Division. Dieser selektierst du in deinem Stylesheet und gibst dieser die Eigenschaft background (background-image). Darüber bindest du das zweite Bild ein.

Markup:

<div class="imgWrap">
   <img src="path/to/image.jpg" />
</div>

CSS:

.imgWrap {background:url(path/to/image.jpg) no-repeat;}

LG medmonk

macxii 
Beitragsersteller
 16.01.2015, 13:22

So ich habe es ausprobiert, aber ich kann das überlappende Bild einfach nicht verschieben und ich weiß nicht warum.

Hier mal der HTML Code und CSS:

und CSS:

"erbt jedes Bild:" .picture {/* StyleSheet, das alle Bilder erben um StadardWerte nicht weiter eingeben zu müssen!*/ max-width: 100%; height: auto; }

.startScreenButton {
    
    }



.startScreenPicture {
    background:url(images/pictureStartPageTastatur.png)
}
medmonk  17.01.2015, 20:45
@macxii

Bitte zeig uns dein Markup und CSS. So kann man es schwer nachvollziehen.
hummelxy
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
15.01.2015, 17:58

Warum sollte deine Website nicht responsive sein, wenn du mit absoluter Positionierung arbeitest?

Du kannst ja sogar MediaQueries anwenden...
hummelxy  15.01.2015, 23:48

Diese Annahme ist schon grundlegend falsch... Wie willst du denn eine gute Website machen, komplett ohne positions? Das würde ich gerne sehen ;-)

RakonDark  20.02.2017, 14:04
@hummelxy

interressant , das gute webseiten von position abhängen soll . was für ein fail .
macxii 
Beitragsersteller
 15.01.2015, 18:34

Ich dachte, ich hätte gelesen, dass man mit Position an sich nicht arbeiten soll. Dann werde ich es eifach so machen, danke :)
Stargazzzing
30.03.2016, 14:12

Dafür verwendet man absolute Positionierung.

Statt deinbild.deinedateiendung nimmst du natürlich deine zwei Bilder.

Jsfiddle: https://jsfiddle.net/gafngh4e/

In der Jsfiddle sieht man die Bilder nicht sondern den Alternativtext.

<!DOCTYPE HTML>
<html>
<head>
<title>Beispiel wie man zwei Bilder übereinander legt</title>
<style>
#bild1
{
position:absolute;
top:10px;
left:10px;
width:100px;
height:100px;
}

#bild2
{
position:absolute;
top:10px;
left:10px;
width:100px;
height:100px;
}

</style>
</head>
<body>
<img id="bild1" src="deinbild1.deinedateiendung" alt="bild1">
<img id="bild2" src="deinbild2.deinedateiendung" alt="bild2">
</body>
</html>