Wie man ein Hintergrundbild auf einem Bootstrap-form?

Ich versuche, ein Hintergrundbild auf meine form (wie hinter den text-und Eingänge, wie ein hintergrund Bild von meiner web-site), wobei die Bootstrap Rahmen, aber das Bild erscheint am Ende und ich möchte es in den "container".

Mein code ist so etwas wie dieses:

<div class="container">
    <div class="thumbnail">
        <form....>
            <fieldset>
            .
            .
            .
        </form>
        <img src="cs.jpg" class="img-responsive">
    </div>
<div>

InformationsquelleAutor Gerardo Tarragona | 2014-07-24

  1. 2

    Haben Sie versucht, die Einstellung für das Hintergrundbild des Containers als Bild? IE:

    .container {
    background-image: url("cs.jpg");
}

    Oder können Sie es inline:

    <div class="container" style="background-image: url('cs.jpg');">
    ...
</div>
    Ich denke, dass funktioniert...hier ist ein bootply bootply.com/I8VAkEy5n4
    Es funktioniert !, es scheint, wie ich war, die Bearbeitung der CSS-stylesheet bootstrap, mein eigenes CSS nur mit .container{ zurück.... } oder Putting <div class... sytle="background-image..."> fast, das problem zu beheben, nun die Sache ist, dass das Bild angezeigt wird, abgeschnittenen, es zeigte sich nur in der thumbnail-div, aber es sieht echt gut aus!
    Super!!! (Btw: Sie akzeptieren die Antwort, indem Sie auf das Häkchen auf der linken Seite. Auch, wenn Sie wollen das volle Bild angezeigt wird, dann können Sie geben Sie einfach die Breite/Höhe für das element.

    InformationsquelleAutor NathanG

  2. 1

    oder Sie könnten versuchen, wie diese..

    <body>
    <div class="jumbotron">
    <div class="container">
        <h1>Hello, world!</h1>
        <p>...</p>
    </div>
    </div>
</body>

    und in css wie dieses:

    .jumbotron {
    position: relative;
    background: #fff url("slide.jpg") center center;/*slide.jpg =>you image*/   
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

    InformationsquelleAutor lazydeveloper

Schreibe einen Kommentar