3

I put a background image and I'm using a card at the middle of the page. I've a white bar that come across all the screen and I don't know how to remove it.

Here is a screenshot:

enter image description here

Here is my code

<!doctype html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    </head>

    <style type="text/css">
        @media (min-width: 768px) {
            html{
                background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }
    </style>

    <body>
        <div class="container" style="background-color: transparent;">
            <main style="background-color: transparent;">
                <div class="col-md-12" style="background-color: transparent;">
                    <div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">                     
                        <div class="card-body" >                            
                            <h6 class="card-title text-center">Connexion</h6>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                            </div><br/>
                            <div class="text-center">
                                <a class="btn btn-primary" href="index.html">Se connecter</a>
                            </div>
                         </div>
                    </div>
                </div>
            </main>
        </div>
    </body>

</html>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
IsmaElzem
  • 109
  • 10

4 Answers4

3

Change your background to be set to the body instead of html:

 <!doctype html>
        <html lang="fr">

            <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <meta name="description" content="">
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
                integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
            </head>

            <style type="text/css">
                @media (min-width: 768px) {
                    body{
                        background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
                        background-repeat: no-repeat;
                        background-size: 100%;
                    }
                }
            </style>

            <body>
                <div class="container" style="background-color: transparent;">
                    <main style="background-color: transparent;">
                        <div class="col-md-12" style="background-color: transparent;">
                            <div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">                     
                                <div class="card-body" >                            
                                    <h6 class="card-title text-center">Connexion</h6>
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">Email</label>
                                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                    </div><br/>
                                    <div class="text-center">
                                        <a class="btn btn-primary" href="index.html">Se connecter</a>
                                    </div>
                                 </div>
                            </div>
                        </div>
                    </main>
                </div>
            </body>

        </html>
Filip Huhta
  • 2,043
  • 7
  • 25
  • 4
    Generally it's worth explaining **why** the answer works, as well as giving a functional code example. – DBS Mar 04 '21 at 15:26
0

Add transparent to your body as well

<!doctype html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    </head>

    <style type="text/css">
        @media (min-width: 768px) {
            html{
                background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }
    </style>

    <body style="background-color: transparent">
        <div class="container" style="background-color: transparent">
            <main style="background-color: transparent;">
                <div class="col-md-12" style="background-color: transparent;">
                    <div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">                     
                        <div class="card-body" >                            
                            <h6 class="card-title text-center">Connexion</h6>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                            </div><br/>
                            <div class="text-center">
                                <a class="btn btn-primary" href="index.html">Se connecter</a>
                            </div>
                         </div>
                    </div>
                </div>
            </main>
        </div>
    </body>

</html>
Evren
  • 4,147
  • 1
  • 9
  • 16
0

there is background color in your body tag.

you can set background color to transparent.

body {
    background-color: transparent;
 }
Prakash Rajotiya
  • 1,013
  • 5
  • 11
0

The issue is caused by this line which is associated with the head tag.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

Use the below code and the issue will be fixed. The change that I made is, I changed the background property of the body to transparent which was assigned by default by the above tag. Now it works perfectly. Hope it helps.

<!doctype html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    </head>

    <style type="text/css">
        @media (min-width: 768px) {
            html{
                background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
                background-repeat: no-repeat;
                background-size: 100%;
            }
            body{
                background-color: transparent;
            }
        }
    </style>

    <body>
        <div class="container" style="background-color: transparent;">
            <main style="background-color: transparent;">
                <div class="col-md-12" style="background-color: transparent;">
                    <div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">                     
                        <div class="card-body" >                            
                            <h6 class="card-title text-center">Connexion</h6>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                            </div><br/>
                            <div class="text-center">
                                <a class="btn btn-primary" href="index.html">Se connecter</a>
                            </div>
                         </div>
                    </div>
                </div>
            </main>
        </div>
    </body>

</html>
Chamod Perera
  • 11
  • 4