✔ z-index funktioniert nicht - Elemente nicht sichtbar

zum beispiel die möglichkeit bilder hinter hintergründen oder farben zu verbergen.
ich habe, als ich angefangen habe die seite für einen bekannten zu gestalten, gemacht, das das portrait welches man links gleich beim öffnen sieht, beim scrollen hinter dem hintergrund verschwindet. leider hab ich vergessen wie ich das gemacht hatte.
ich möchte das bild gleich hinter dem dunklen hintergrund des about-bereichs verschwinden lassen. wenn ich das mit dem z-index mache, ist das bild schon nicht auf dem home-bereich sichtbar.

Das ist die variante wie ich es jetzt habe:
CSS: 
#wolf1 {
    position: fixed;
    top: 55%;
    left: 0%;
}
#wolf2 {
    position:absolute;
    top: 45%;
    right: -30%;
}
#about .profile-pic1 {
   position: relative;
   width: 70%;
   border-radius: 0%;
   z-index: 1;
}
#about .profile-pic2 {
   position: relative;
   width: 65%;
   border-radius: 0%;
}

wenn ich allerdings folgendes eingebe erhalte ich keine veränderung...
CSS: 
#about {
   padding-top: 96px;
   padding-bottom: 66px;
   background: ##1F1F1F; no-repeat center center;
   background-size: cover !important;
    -webkit-background-size: cover !important;
   background-attachment: fixed;
   z-index: 2;

   position: relative;
   min-height: 200px;
   width: 100%;
   overflow: hidden;
}

er müsste doch normalerweise das bild hinter dem hintergrund verschwinden lassen. es kommt ja auch im kontakt-bereich wieder...o_O
www.eisbergsalat666.bplaced.net
 
Eisbergsalat666 hat gesagt.:
ich möchte das bild gleich hinter dem dunklen hintergrund des about-bereichs verschwinden lassen.
Zum Vergrößern anklicken....
Dafür sollte zunächst das "Profilbild" im HTML-Code außerhalb von #about notiert werden - z.B. im Anschluß des <header>-Elements:
HTML: 
<!-- Header End -->
<div id="wolf1"><img  src="images/portrait1.png" alt="" class="profile-pic1" title="Wolf" /></div>
Das zugehörige CSS lautet nun so:
CSS: 
#wolf1 {
   position: fixed;
   top: 55%;
   left: 0%;
   z-index:1
}
#wolf1 .profile-pic1 { /* anstelle von #about .profile-pic1 */
  position: relative;
  width: 70%;
  border-radius: 0%
}
Bei der Hintergrundfarbendefinition für #about ist dir mit den zwei hintereinander folgenden #-Zeichen ein Tippfehler unterlaufen, womit dieser Hintergrund auch nicht existiert.
 
Zuletzt bearbeitet:
stimmt...hätte ich mir auch selber denken können :)

und eine voraussichtlich letzte Frage zu diesem Thema !!

im Bereich des Kontakt-Formulars muss das Gesicht nicht zu sehen sein (ich seh das eh schon viel zu oft :p). Allerdings reicht hier die Angabe des z-Indexes nicht aus. Ich hab schon versucht dem mit overflow entgegenzuwirken, ebenso mit der Position, aber iwie will es nicht so recht.
CSS: 
#contact {
   background: #191919;
   padding-top: 96px;
   padding-bottom: 102px;
   color: #636363;
   z-index: 5;  /* das reicht hier nicht aus...auch höhere Werte bringen keine Befriedigung */
}
#contact .section-head { margin-bottom: 42px; }

#contact a, #contact a:visited  { color: #11ABB0; }
#contact a:hover, #contact a:focus { color: #fff; }
in jedem anderen Bereich hat das ohne Probleme funktioniert. Warum nicht hier?


ohne Witz...ich würd mich sehr genervt von mir selbst fühlen. Wenn ich mit dem Projekt fertig bin, kauf ich mir ein Buch und lerne CSS 3 von der Pike auf! html werd ich mir auch nochmal nen fortgeschrittenen-Kursus reinziehen. Kennst du zufällig ein gutes Buch oder sogar eine gute Seite im Netz?
 
selfhtml stellt mich natürlich vor die herausforderung selbst entscheiden zu müssen was wichtig für den anfang ist und was nicht. aber als nachschlagewerk bei konkreten fragen TOP.
thestlyeworks werde ich mir mal näher anschauen.

ich bedank mich erstmal ganz ganz freundlich !!!!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück