如何使用 CSS/Bootstrap 将 jpg 作为 HTML div 的背景？答案

【问题标题】：How to make a jpg as background for HTML div using CSS/Bootstrap?如何使用 CSS/Bootstrap 将 jpg 作为 HTML div 的背景？
【发布时间】：2021-02-23 23:50:02
【问题描述】：

我想使我的home_no_user.html（包含 id="background-image"）中的第一个 div 具有使用图片 yoga-stock.jpg 的图像背景。过去我很容易做到这一点，但现在，它不起作用，我不知道为什么。是我如何在 css #background-image 中找到文件的吗？我试过了

url("../images/yoga-stock.jpg");
url("/images/yoga-stock.jpg");
url("static/images/yoga-stock.jpg");
url("..static/images/yoga-stock.jpg");

这是我的文件夹中文件的组织方式：

以下是我的两个 html 文件、css 代码和我的 python 代码 app.py 的相关部分。

######app.py#######
import os

from flask import Flask, render_template, request, flash, redirect, session, g, abort
from flask_debugtoolbar import DebugToolbarExtension
from sqlalchemy.exc import IntegrityError

from forms import *
from models import *
import email_validator

CURR_USER_KEY = "curr_user"

app = Flask(__name__)

# Get DB_URI from environ variable (useful for production/testing) or,
# if not set there, use development local db.
app.config['SQLALCHEMY_DATABASE_URI'] = "postgres:///yoga"
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['SQLALCHEMY_ECHO'] = True
app.config['SECRET_KEY'] = "secretkey"
app.config['DEBUG_TB_INTERCEPT_REDIRECTS'] = False

connect_db(app)
db.drop_all()
db.create_all()

toolbar = DebugToolbarExtension(app)


##############################################################################
@app.before_request
def add_user_to_g():
    """If we're logged in, add curr user to Flask global."""

    if CURR_USER_KEY in session:
        g.user = User.query.get(session[CURR_USER_KEY])

    else:
        g.user = None


def do_login(user):
    """Log in user."""

    session[CURR_USER_KEY] = user.id


def do_logout():
    """Logout user."""

    if CURR_USER_KEY in session:
        del session[CURR_USER_KEY]


@app.route('/')
def homepage():
    """Show homepage: """

    return render_template('home_no_user.html')

/* ====================== style.css=================*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');


body {
  font-family: 'Open Sans', sans-serif;
}


.form-control {
  margin-bottom: 20px;
}

.btn {
  border-radius: 20px;
}

.btn:hover {
  cursor: pointer;
}

.button-width {
  width: 200px;
}

#home_container {
  height: 500px;
}

#background-image {
  background-image: url("../static/images/yoga-stock.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

/* ======================= Nav */

.navbar {
  background-color: #fff;
  height: 46px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  margin-bottom: 1rem;
  position: relative;
  z-index: 9999;
}

.navbar a {
  color: #66757f;
  font-size: 14px;
  font-weight: bold;
}

.navbar a:hover {
  color: #1c94e0;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand > img {
  display: inline-block;
  margin-bottom: 2px;
  margin-right: 5px;
  width: 130px;
  border-radius: 2px;
}

.nav > li > a > img {
  width: 32px;
  border-radius: 32px;
}

ul.nav.navbar-nav {
  align-items: center;
}

ul.nav.navbar-nav li {
  margin: 0 0.5rem;
  display: flex;
}

nav form.navbar-form {
  display: flex;
  position: relative;
}


.onboarding > .navbar {
  background-image: url("/static/images/nav-bg.png");
  background-size: 100% 100%;
}

.onboarding .navbar-header {
  margin: 0 auto;
}

.onboarding .navbar-brand {
  margin: 0;
}

.onboarding .navbar-brand span {
  display: none;
}

.onboarding .nav.navbar-nav.navbar-right {
  position: absolute;
  right: 16px;
}

.onboarding > .navbar a {
  color: #fff;
}

.onboarding > .navbar form.navbar-form {
  display: none;
}

.onboarding {
  background-color: #fff;
}

@media (max-width: 468px) {
  nav form.navbar-form {
    display: none;
  }
}

nav + .container {
  margin-bottom: 1rem;
}

/* ===================== User profile */

.join-message {
  align-items: center;
  margin: auto;
}

#profile-image,
#profile-avatar {
  border-radius: 100%;
  display: block;
  margin-left: -15px;
}

#profile-image {
  margin: 0 auto 15px;
  width: 100%;
  height: 200px;
  width: 200px;
}

.profile-avatar {
  width: 200px;
  height: 200px;
  border: 5px solid #fff;
  margin-top: -120px;
  z-index: 1;
  position: relative;
  box-shadow: 0 1px 1px rgba(136, 153, 166, 0.15);
}

.timeline-image {
  border-radius: 48px;
  height: 48px;
  width: 48px;
  margin-top: 2px;
}


.full-width {
  width: 100vw;
  margin: 0 -50vw;
  position: relative;
  left: 50%;
  right: 50%;
}

.row.full-width {
  background-color: #fff;
  margin-top: -80px;
  margin-bottom: 1rem;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  height: 60px;
  align-items: center;
}

/* ============================ Signed out home */

.home-hero {
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
  width: 100vw;
  left: 0;
  z-index: -1;
  background-image: url("../static/images/yoga-stock.jpg");
  background-size: cover;
  background-position: center center;
  color: #fff;
  text-align: center;
  padding: 1rem;
  text-shadow: 0 0 8px #66757f;
}





/* ========================== Signup/Login */

#user_form input.form-control {
  font-size: 18px;
  font-weight: bold;
  padding: 12px;
}


/* ================================ 404 page */

.message-404 {
  color: white;
  margin-top: 2em;
  text-align: center;
}

.message-404 a {
  color: white;
}

.message-404 > h4.display-4 {
  font-size: 2.5em;
}

.message-404 .form-inline input {
  flex: 1;
}

<!-- --------base.html-------- -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Lunchtime Yoga for Professionals</title>

  <link rel="stylesheet"
        href="https://unpkg.com/bootstrap/dist/css/bootstrap.css">
  <script src="https://unpkg.com/jquery"></script>
  <script src="https://unpkg.com/bootstrap"></script>

  <link rel="stylesheet"
        href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  <link rel="stylesheet" href="/static/stylesheets/style.css">
  <script src='static/yoga_js.js'></script>
  <script src='https://cdn.jsdelivr.net/combine/npm/fullcalendar@5.3.2/main.min.js,npm/fullcalendar@5.3.2/locales-all.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/package.json'></script>
  <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/README.md'></script>
  <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.min.css' rel='stylesheet' />
  <script>

    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth'
      });
      calendar.render();
    });

  </script>
</head>

<body>
<nav class="navbar navbar-expand">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">
        <span>Lunchtime Yoga for Professionals</span>
      </a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="/">Home</a></li>
      <li><a href="/">About</a></li>
      <li><a href="/">Instructors</a></li>
      <li><a href="/classes">Classes</a></li>
      <li><a href="/">Contact</a></li>
      <li><a href="/">Edit Classes</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      {% if not g.user %}
      <li><a href="/signup">Sign up</a></li>
      <li><a href="/login">Log in</a></li>
      {% else %}
      <li><a href="/users/detail">Account</a></li>
      <li><a href="/logout">Log out</a></li>
      {% endif %}
    </ul>
  </div>
</nav>
<div class="container">

  {% block content %}
  {% endblock %}

</div>
</body>
</html>

<!-- --------home_no_user.html-------- -->
{% extends 'base.html' %}
{% block content %}




  <div class="bg position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center" id="background-image">
    <div class="col-md-12 p-lg-5 mx-auto my-5">
      <h1 class="display-4 font-weight-normal">Lunchtime Yoga for Professionals</h1>
      <p class="lead font-weight-normal">This is the homepage for the yoga website.</p>
      <a href="/login" class="btn btn-primary btn-lg">Login</a>
      <a href="/signup" class="btn btn-success btn-lg">Sign up</a>
    </div>
  </div>
  

  <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
    <h1 class="display-4">About</h1><br>
    <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
      Qui vel quisquam ratione architecto sit unde, odit autem reiciendis alias aliquam 
      officia quidem rem iusto minima sapiente, consectetur error, adipisci optio?</p>
  </div>
  <hr class="featurette-divider"><br>
  <div class="px-3 pt-md-1 pb-md-10 mx-auto text-center">
    
    <h1 class="display-4">Instructors</h1><br>
  </div>
<div class="row featurette">
    <div class="col-md-7 order-md-2"><br>
      <h2 class="featurette-heading">Lisa Olmstead</h2>
      <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Qui vel quisquam ratione architecto sit unde, odit autem reiciendis alias aliquam 
        officia quidem rem iusto minima sapiente, consectetur error, adipisci optio?</p>
    </div>
    <div class="col-md-5 order-md-1">
        <img src="../static/images/mom.jpg" alt="Instructor Image" id="profile-image">
    </div>
</div><br>
  
<div class="row featurette">
  <div class="col-md-7">
    <h2 class="featurette-heading">Jenn</h2>
    <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
  </div>
  <div class="col-md-5">
    <img src="../static/images/profile_pic.png" alt="Instructor Image" id="profile-image">
  </div>
</div><br>
<div class="row featurette">
  <div class="col-md-7 order-md-2"><br>
    <h2 class="featurette-heading">AJ</h2>
    <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
      Qui vel quisquam ratione architecto sit unde, odit autem reiciendis alias aliquam 
      officia quidem rem iusto minima sapiente, consectetur error, adipisci optio?</p>
  </div>
  <div class="col-md-5 order-md-1">
      <img src="../static/images/profile_pic.png" alt="Instructor Image" id="profile-image">
  </div>
</div>
<br><hr class="featurette-divider"><br>
<div class="px-3 pt-md-1 pb-md-10 mx-auto text-center">
    
  <h1 class="display-4">Classes</h1><br>
</div>
<div id='calendar'></div>
{% endblock %}

【问题讨论】：

如果/static/stylesheets/style.css 有效，那么它就是url(/static/images/yoga-stock.jpg)。
我刚刚尝试过"..images/yoga-stock.jpg";、"images/yoga-stock.jpg";、"static/images/yoga-stock.jpg",'"..static/images/yoga-stock.jpg"' 没有任何运气
也只是在目录前面加上/ 尝试了以上所有这些
试试 '../images/yoga-stock.jpg'
运气不好。不知道发生了什么！ Yoga-stock.jpg 是真实的图片。我什至尝试在我的目录中移动它并在 css 中列出适当的目录...

标签： python html css twitter-bootstrap flask

【解决方案1】：

试试

../static/images/visible.png

【讨论】：

【解决方案2】：

确保您的文件路径正确，尝试给它一个固定的宽度和高度（如 100vh 或 1000px 但不是 100%）。

【讨论】：