почему фоновое изображение не помещается должным образом в контейнер с загрузочной жидкостью? - PullRequest
Новая
       8

почему фоновое изображение не помещается должным образом в контейнер с загрузочной жидкостью?

0 голосов
/ 01 октября 2018

фоновое изображение появляется только в первых двух столбцах, а не на фоне всего контейнера.Я использовал код ниже: 

    <div class="container-fluid bg">
        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-12">
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <form class="form-container">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>

                    <button type="submit" class="btn btn-default">Submit</button>
                </form> 
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
            </div>
        </div>
    </div>
and css file is:

    .bg{
    background: url('bg.jpg');
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;   
}
.form-container{
    border: 1px solid;
}

Ответы [ 3 ]

0 голосов
/ 01 октября 2018

Включено Размер фона: обложка 

.bg {
  background-image: url('https://via.placeholder.com/200x200');
  background-size: cover;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.form-container {
  border: 1px solid;
}
<div class="container-fluid bg">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
      <form class="form-container">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>

        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
  </div>
</div>
0 голосов
/ 01 октября 2018

Использование background-repeat: no-repeat; background-size: cover;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    /* The image used */
    background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>
<div class="bg">
<div class="container-fluid bg">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
      <form class="form-container">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>

        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
  </div>
</div>
</div>


</body>
</html>
0 голосов
/ 01 октября 2018

Удалить background-repeat: no-repeat; и добавить 100% высоты к телу и HTML. 

html,
body {
  height: 100%;
}

.bg {
  background: url('https://picsum.photos/100/100');
  height: 100%;
  width: 100%;
}

.form-container {
  border: 1px solid;
}
<div class="container-fluid bg">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
      <form class="form-container">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>

        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
  </div>
</div>
...