Cum se pune o imagine de fundal pe un formular Bootstrap? (Programare, Html, Css, Twitter Bootstrap, Twitter Bootstrap 3)

Gerardo Tarragona a intrebat.

Încerc să pun o imagine de fundal pe formularul meu (ca în spatele textului și a intrărilor, ca o imagine de fundal a site-ului meu web), folosind framework-ul Bootstrap, dar imaginea apare în partea de jos și o vreau în interiorul „containerului”.

Codul meu este ceva de genul acesta:

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

2 răspunsuri
NathanG

Ai încercat să setezi imaginea de fundal a acelui container ca imagine? IE:

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

Sau o poți face inline:

<div class="container" style="background-image: url('cs.jpg');">
    ...
</div>

Comentarii

  • Funcționează !, se pare că editam foaia de stil CSS a bootstrap, făcându-mi propriul CSS doar cu .container{ back…. } sau punând <div class… sytle=”background-image…”> aproape că am rezolvat problema, acum problema este că imaginea apare tăiată, este afișată doar în interiorul div-ului de miniatură, dar arată foarte bine! –  > Por Gerardo Tarragona.
  • @GerardoTarragona Minunat! (: Btw, puteți accepta acest lucru ca răspuns, făcând clic pe semnul de verificare din stânga. De asemenea, dacă doriți ca imaginea completă să apară, atunci puteți specifica doar lățimea/înălțimea pe element. –  > Por NathanG.
lazydeveloper

sau ai putea încerca așa…

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

și în css așa:

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