Bild zentriert bei skalierbarem Hintergrund
joy
- css
Hallo,
ich stehe zurzeit leider vor einem kleinen oder auch großen Problem.
Ich habe meine Website mit einem skalierbaren Hintergrundbild und möchte mein Logo mittig platzieren, dieses soll also immer mittig sein.
Mein Problem:
Ich bekomme es nicht so hin, dass es mittig ist..
So sieht das ganze bei mir aus:
<div id="logo"><div id="logo">
<img src="http://luftundliebe.bplaced.net/img/logoneu.png"></div>
</div>
</div>
#logo div {
z-index:90;
position:relative;
margin:auto;
margin-top:-500px;
margin-left:200px;
top:50%;width:100%;
font-size:15px;
color:#fff;
}
Ich wäre sehr dankbar, wenn mir jemand weiter helfen würde!
Vielen Dank schon mal!!
Hallo,
mit deinen Angaben ist eine konkrete Hilfe leider nicht möglich.
Google findet jede Menge unterschiedliche Lösungsansätze:
Gruss
MrMurphy
Hallo,
mit deinen Angaben ist eine konkrete Hilfe leider nicht möglich.
naja, zumindest kann man konkret auf Fehler im HTML hinweisen:
du schließt, zumindest im gezeigten Codeschnipsel, drei divs, obwohl du nur zwei öffnest. Mindestens drei davon sind wahrscheinlich überflüssig. Außerdem hast du zwei identische IDs vergeben.
IDs heißen IDs, weil sie identifizieren sollen, nicht weil sie identisch sind!
Den Validator kennst du?
Gruß
Kalk
Ich habe meine Website mit einem skalierbaren Hintergrundbild und möchte mein Logo mittig platzieren, dieses soll also immer mittig sein.
Wenn dein Logo immer Zentriert (oben, unten & links, rechts) vom Bildschirm sein soll, würde ich dieses so umsetzten
<body>
<div class="logo"><img src="http://placehold.it/525x350"></div>
</body>
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
html {
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
.logo {
margin: 0 auto;
width:550px;
text-align:center;
}