How to put a background image on a Bootstrap form?

Question

I'm trying to put a background image on my form (like behind the text and inputs, just like a background image of my web site), using the Bootstrap framework but the image appears at the bottom and I want it inside the "container".

My code is something like this:

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

Answer 1

Have you tried setting the background image of that container as the image? IE:

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

Or you can do it inline:

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

Answer 2

or you could try like this..

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

and in css like this:

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

How to put a background image on a Bootstrap form?

Question

2 answers

solution1
2 ACCPTED 2014-07-24 02:15:38

solution2
1 2015-11-22 18:17:04

How to put a background image on a Bootstrap form?

Question

2 answers

solution1 2 ACCPTED 2014-07-24 02:15:38

solution2 1 2015-11-22 18:17:04

solution1
2 ACCPTED 2014-07-24 02:15:38

solution2
1 2015-11-22 18:17:04