Editions using Bootstrap

Asked

Viewed 82 times

2

I’m using a full image bootstrap but my image besides not being changed is getting in the middle of the screen. I wanted the login screen padding to be restricted to its size, but it’s taking half the screen. Follow the css code:

body {
    margin-top: 50px; 
}

.full {
    background: "img/bg.JPG";
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

Now follow the html part where I enter a small login field:

<form method="post" name="frmIndex" id="frmIndex" action="autenticausuario.php"><br><br><br><br><br><br><br><br>
    <div id="login" style="width: 460px; background-color: #21374c; margin-left: 35%; height: 160px;">
                <div id ="img" style=" float: left;">
                    <img src="img/logocodap.png" style="width: 160px; height: 160px;"/>
                </div>
        <div id="acesso" style="float: left; width: 280px;">

            <div id="nnn" style="font-size: 30px; text-align: center; color: white; float: left; margin-left: 20px;  margin-bottom: 10px;">
                    <p><b>nnnnnnnnnnn</b></p>
                </div>
                <div id="aut" style=" float: left;">
                    <div id="labels" style="float: left; margin-left: 20px; color: white;">
                        <label>ID:</label><br><br>
                        <label>SENHA:</label>
                    </div>
                    <div id="labels" style="float: right;">
                        <label><input type="text" name="id" id="id" style="width: 130px;" /></label><br><br>
                        <label><input type="password" name="senha" id="senha"  style="width: 130px;" /></label>
                    </div>

                    <div id="labels" style="float: left;">
                        <br>
                        <p style=" margin-left: 125px;"><input type="submit" value="Entrar" id="botao_entrar" id="botao_entrar"/></p>
                    </div>


             </div>
        </div>       
     </div>
</form>
  • Your question was not very clear, because you created the class . FULL but did not use in any element... Where more precisely do you want to apply the image? There’s a picture of how I’d like it to look?

1 answer

0

Your class full is not applied to any tag HTML of the code provided. I didn’t quite understand what you want to do, it would put an image of background that takes up the entire view window?

If it is, remove the margin from the body and create a div father to the form, with class full, adding:

width: 100vw;
height: 100vh;

This will make the div occupy all the available height and width on viewport.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.