Changing Login Background

How can I manipulate the CSS to change the background only on the login screen . Thats the code in my Login screen :


<?php

/* @var $this yii\web\View */

/* @var $form yii\bootstrap\ActiveForm */

/* @var $model app\models\LoginForm */

 

use yii\helpers\Html;

use yii\bootstrap\ActiveForm;

 

$this->title = 'Login';

 

$this->params['breadcrumbs'][] = $this->title;

?>

 

 

<div class="bimg">

    <h1><?= Html::encode($this->title) ?></h1>

 

    <p>Please fill out the following fields to login:</p>

 

    <?php

    $form = ActiveForm::begin([

                'id' => 'login-form',

                'options' => ['class' => 'form-horizontal'],

                'fieldConfig' => [

                    'template' => "{label}\n <div class=\"center\"><div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-8\">{error}</div></div>",

                    'labelOptions' => ['class' => 'col-lg-1 control-label'],

                ],

    ]);

    ?>

 

    <?= $form->field($model, 'email')->textInput(['autofocus' => true, 'placeholder' => 'Write your email address']) ?>

 

    <?= $form->field($model, 'password')->passwordInput(['placeholder' => 'Write your password']) ?>

 

    <?=

    $form->field($model, 'rememberMe')->checkbox([

        'template' => "<div class=\"col-lg-offset-1 col-lg-3\">{input} {label}</div>\n<div class=\"col-lg-8\">{error}</div>",

    ])

    ?>

 

    <div class="form-group">

        <div class="col-lg-offset-1 col-lg-11">

            <div>

                <?= Html::a(Yii::t("app", "Forgotten  password") . "?", ["/site/forgot"]) ?>

                <br>

            </div>

            <br>

            <?= Html::submitButton('Login', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>

        </div>

    </div>

    <?php ActiveForm::end(); ?>

</div>

I put <div class="bimg"> to put the background but I get only - http://prntscr.com/cjplkl .


.bimg{

    background: url("images/1.jpg")  !important ;

    height: 100%;

    width: 100%;

    background-size:cover;


}

the class in the site.css

So its cut not full background . When I use the body to put the background it goes to all pages background so its kind of problem . Because I want to edit only Login screen background not all pages background

You should make your body and html elements full-height too:




body, html {

    height: 100%;

}



By the way, do not post CSS-related questions here next time.

sure but its 100% , the problem is that it goes in the "container" , and it goes again croped . I cant find a way to get the background only on the login . I try to do it in the main.php which is in the layouts ,but only get background on every page and not on the page I want only .

P.S. Sry if the post is not for here , but dont know where else to ask for help

Register CSS code block or CSS file inside your login view and declare your styles there. It could be an option if this background is only for login page and you’re making a small project. Possible CSS:




body, html {

    height: 100%;

}


body {

    background: url("images/1.jpg");

    background-size: cover;

}



the css is registered , and it works . http://prntscr.com/cjt2gn that is the problem , the background is in the container and cant go full page . because the ’ div class -> wrap ’ cover all the pages by default in yii2 (layouts/main.php) and cant get the full screen on the page . So the problem is that I cant put it in the wrap class because it goes on all pages , and if he stay in container it dont go full screen on the page…