Bootstrap layout login page problem with flex containers and displaying background image-CodePudding

For some time I'm struggling with some really painful problems.

I'm trying to create a login page with a simple layout:

On screens over 800px width:

Two columns
On the left side, I want to show a logo, login form, text box, and button. No Background image.
On the right side, I want to show a div with a background image.

On screens less than or equal to 800px with:

A single column with the logo, login form, text box, and button.
The background image that is shown in the right column on large screens should be displayed as the background image of this single column on small screens.

Html file

<div class="flex-container">
<div class="col-lg-4 index-top">
    <div class="row">
        <div class="col log-in">
            <div class="col no-padding">
                <h1>
                    <img src="/img/AnonimowySygnalista.svg" alt="logo Anonimowy Sygnalista" class="logo-login" />
                    <span class="sr-only hidden">Anonimowy sygnalista</span>
                </h1>
                <form action="">
                    <label for="">UserName</label>
                    <input type="" id="" name="" placeholder="Wpisz otrzymany login" class="input"></input>
                    <input type="submit" value="Zaloguj" class="btn-primary"></input>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-8 col background-img">
</div>

CSS file

.container {
    display: block;
    padding: 0;
    margin: 0;
}
.flex-container {
    display: flex;
    flex-direction: column;
}
input, textarea {
    display: block;
}
.right {
    float: right;
}
.left {
    float: left;
}
.clear {
    clear: both;
}
label {
    font-weight: 700;
    margin-bottom: .75rem;
}
.btn-primary {
    background-color: #1F7AAB;
    border-radius: 4px;
    border-color: #1F7AAB;
    padding: .5rem 1.5rem;
    width: 100%;
    box-shadow: none;
    color: #fff;
}
.background-img {
    background-image: url('../img/pexels-vlada-karpovich-4050312.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: -1.25rem;
}
.input {
    margin-bottom: 1.5rem;
    max-height: 5rem;
    padding: .5rem .5rem .5rem .75rem;
    border: 1px solid #767676;
    box-sizing: border-box;
    border-radius: 4px;
    width: 100%;
}
.log-in h1 {
    margin: 3rem 0;
}
.index-top {
    z-index: 999;
}
@media (min-width: 801px) {
    .container {
        width: 100% !important;
    }
    .flex-container {
        padding-right: 80px;
        flex-direction: row;
    }
    .index-top {
        margin: 0 80px;
    }

CodePudding user response：

to stack elements on top of each other use position : absolute

adding it to .background-img inside @media should produce the effect, also you'll need the z-index css property to manage which element is behind which

CodePudding user response：

I believe that you would like for the background image to show on the right on large screens & you would like for the background image to show behind the form on small screens.

A simple way to implement this would be to add a CSS class .bg-sometimes to the small (left side) column. We set this class to display a background image. Then, within our @media (min-width: 801px), we set background-image: none; so that the image does not display on large screens.

The code below demonstrates this implementation nicely.

 .container {
        display: block;
        padding: 0;
        margin: 0;
    }
    .flex-container {
        display: flex;
        flex-direction: column;
    }
    input, textarea {
        display: block;
    }
    .right {
        float: right;
    }
    .left {
        float: left;
    }
    .clear {
        clear: both;
    }
    label {
        font-weight: 700;
        margin-bottom: .75rem;
    }
    .btn-primary {
        background-color: #1F7AAB;
        border-radius: 4px;
        border-color: #1F7AAB;
        padding: .5rem 1.5rem;
        width: 100%;
        box-shadow: none;
        color: #fff;
    }
    .background-img {
        background-image: url('https://images.pexels.com/photos/235986/pexels-photo-235986.jpeg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        margin-top: -1.25rem;
    }
    .input {
        margin-bottom: 1.5rem;
        max-height: 5rem;
        padding: .5rem .5rem .5rem .75rem;
        border: 1px solid #767676;
        box-sizing: border-box;
        border-radius: 4px;
        width: 100%;
    }
    .log-in h1 {
        margin: 3rem 0;
    }
    .index-top {
        z-index: 999;
    }

    .bg-sometimes {
        background-image: url('https://images.pexels.com/photos/235986/pexels-photo-235986.jpeg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        margin-top: -1.25rem;
    }

    @media (min-width: 801px) {
        .container {
            width: 100% !important;
        }
        .flex-container {
            padding-right: 80px;
            flex-direction: row;
        }
        .index-top {
            margin: 0 80px;
        }
        .bg-sometimes {
            background-image: none;
        }
    }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="flex-container">
    <div class="bg-sometimes col-lg-4 index-top">
        <div class="row">
            <div class="col log-in">
                <div class="col no-padding">
                    <h1>
                        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
                             alt="logo Anonimowy Sygnalista" class="logo-login"/>
                        <span class="sr-only hidden">Anonimowy sygnalista</span>
                    </h1>
                    <form action="">
                        <label for="">UserName</label>
                        <input type="" id="" name="" placeholder="Wpisz otrzymany login" class="input"></input>
                        <input type="submit" value="Zaloguj" class="btn-primary"></input>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8 col background-img">
    </div>
</div>