Параметры фонового изображения Flask Boostrap

Question

Я новичок в колбе.Я хочу отобразить фоновое изображение в jumbotron, используя Bootstrap во Flask на странице home.html.Однако я не могу изменить его размер.Кроме того, мой текст "Томвар" и другие тексты идут ниже изображения, а не над ним.Детали home.html и jumboron.css.указано ниже

Мой home.html

{% extends "layout.html" %}

{% block title %}Home{% endblock %}

{% block main %}

<main role="main">

  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="container">
  <div class="jumbotron">

   <img src="{{url_for('static', filename='image/home_bg.png')}}" class="image1"/>

      <h1 class="display-3">TomVar</h1>
      <p>A database for variations in Tomato</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>
  </div>

  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus  </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
    </div>
    <hr>

  </div> <!-- /container -->

</main>
{% endblock %}

<footer class="container">
  <p>&copy; Company 2017-2018</p>
</footer>

Мой jumbotron.css , который находится в моей папке static / css:

body {

    padding-top: 3.5rem;
}
.image1 {

 opacity: 0.5;
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

Answer 1

Вы не можете использовать background-size: cover обложку на <img>.Это только для фоновых изображений.

Если вы хотите вставить фактический <img> Вместо этого используйте object-fit: cover

.jumbotron {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.jumbotron-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jumbotron-content {
  color: white;
  position: relative;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="jumbotron">

    <img src="https://picsum.photos/800/500" class="jumbotron-image" />

    <div class="jumbotron-content">
      <h1 class="display-3">TomVar</h1>
      <p>A database for variations in Tomato</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>

  </div>
</div>

Редактировать: И наоборот, вы можете просто добавить встроенный стиль для фонового изображения (используя колбу) на .jumbotron

.jumbotron {
  background-size: cover;
}

.jumbotron-content {
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="jumbotron" style="background-image:url(https://picsum.photos/800/500)">

    <div class="jumbotron-content">
      <h1 class="display-3">TomVar</h1>
      <p>A database for variations in Tomato</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>

  </div>
</div>