Bootstrap Header will nicht transparent werden

1. offizieller Beitrag

    Hallo liebe Community,
    ich bin neu hier und benötige bitte eure Hilfe!

    Ich habe angefangen -(Anfänger) eine Seite Aufzubauen und möchte gerne den Header durchsichtig haben.
    Wenn ich in der CSS "Background:transparent;" eingebe passiert nix, wenn ich "red" eingebe wird der Rot.
    Kann mir jemand verraten warum das Bild nicht durch den Header Scheint?
    im HTML Dokument habe ich das so gemacht (mache das mit Bootstrap):

    <header class="header">
    </header>

    im css:
    .header{
    background:transparent;
    height:100px;
    min-height:100px !important;
    z-index:99;

    }

    .
    Lieben Dank für eure Antworten!
    Alex

    Was soll denn im Header für eine Farbe(Bild) angezeigt werden? Bei Transparent kommt die Hintergrundfarbe des umschließenden Container zum tragen.

    so weit zu sehen.. sieht man Nix..
    also es wurde ja kein Background definiert
    weder als Image noch als color
    dann braucht man auch kein transparent -
    Nix is ja schon Nix :)

    - wobei es bei image explizit auch none; heist u. nicht Transparent -
    mit opacity > opacity: 0.x; kann man da gar nix anfangen..
    (heist ja nicht > background-color: opacity: 0.x; /* oder /*
    background-image: -_-_-_- >> okay ich erspare es Uns :)
    wenn dann nur auf den Container in dem das Background-image oder -color steckt-
    bei body wär es halt der.. aber das wär ja doof..


    bei Background: transparent; ist beides weg -color und -image.
    darum sollte man es einzeln ansprechen
    background-color: Eigenschaft;
    background-image: Eigenschaft;
    außer man will ALLES weg u ne Zeile sparen ;)
    oder eben den Container - was aber was ganz anderes wär als NUR das
    background: , anzusprechen--

    Gruß aus Hamburg ..bzw. Rostock wo ich grad bin.. :)

    Danke für die Antwort,
    Der Effekt, den ich mir wünsche, ist auf der Webseite von sixt Firmenkunden zu sehen.

    Da gibt es quasi keine Navigation und ich möchte, das das Hintergrundbild angezeigt wird.
    Ich hoffe es ist nicht allzu schlimm gecoded, es ist mein erster Versuch...

    Vielen Dank für eure Mühen

    <body>
    <header class="header">

    </header>


    <section id="homesection" class="homesection">
    </section>


    <section id="servicesection" class="servicesection">
    <h1> Fahrzeugbeschriftung für Firmenkunden</h1>
    </section>

    <section class="vorteilesection">
    </section>

    <section class"partnersection">
    orafol und co ist hier
    </section>

    <section id="testimonialsection" class="testimonialsection">
    Testimonals sind hier
    </section>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jque…4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    </body>

    CSS

    @charset "UTF-8";
    /* CSS Document */
    html, body{
    height:100%;
    width:100%;
    }


    .header{
    background:transparent;
    height:100px;
    min-height:100px !important;
    z-index:99;

    }


    .homesection{
    height:auto !important;
    min-height:100%;
    overflow:hidden;
    background:url(../images/fahrzeugbeschriftung_home.jpg) no-repeat center;
    background-size:cover;
    background-attachment:fixed;
    }

    .servicesection{
    height:auto !important;
    min-height:100%;
    overflow:hidden;
    background-color:#fff;
    }

    .vorteilesection{
    height:auto !important;
    min-height:100%;
    overflow:hidden;
    background-color:#D1CFCF;



    }
    .partnersection{
    height:auto !important;
    min-height:300px;
    overflow:hidden;
    background-color:#fff;



    }


    .testimonialsection{
    height:auto !important;
    min-height:100%;
    overflow:hidden;
    background-color:#A41F9E;
    }

    • Offizieller Beitrag

    Ohne jetzt im Detail gelesen zu haben, aber prinzipiell dürfte es doch reichen, das Hintergrundbild dem <body> zu geben und im Header bzw. Navigation einfach keinen Hintergrund zu verwenden?!

    EDIT: Nur mal ohne viel Gedöns ein Beispiel angehängt.
    Geht vielleicht besser, aber ich denke, das Prinzip suchst Du.

    Hallo Arne,
    vielen Dank, genau das ist es!
    Sorry, dass ich erst so spät Antworte aber ich bin im Moment in Asien unterwegs und habe hier nicht überall Internet im Jungle!!
    Wo habe ich denn jetzt den Fehler gemacht bzw. bin falsch an die Sache heran gegangen?
    Das ist ein sehr nettes Forum hier!

    LG
    Alex