无法在我的网页中放置背景图片

时间：2019-02-21 09:23:58

标签： html css

我无法在网页上放置背景图片。我认为这是由于容器引起的，但我无法解决此问题。我已经包括了我的家 页面代码。我使用了引导程序来设计网页。我尝试过样式 使用html {.... 但它似乎对网页没有任何影响。 我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>POPCORN TIME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<style type="text/css">
html{ 
      background: url(popcorn.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }

 </style>





{% block stylesheets %}
    <!-- Bootstrap provided CSS files. -->
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <style type="text/css" >
      body {
        padding-top: 60px;
        padding-bottom: 40px;

      }

    </style>
    <link href="/static/css/bootstrap-responsive.css" rel="stylesheet">
{% endblock stylesheets %}

   {% block javascript %}

    <!-- Bootstrap related javascript files -->

    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/bootstrap-transition.js"></script>
    <script src="/static/js/bootstrap-alert.js"></script>
    <script src="/static/js/bootstrap-modal.js"></script>
    <script src="/static/js/bootstrap-dropdown.js"></script>
    <script src="/static/js/bootstrap-scrollspy.js"></script>
    <script src="/static/js/bootstrap-tab.js"></script>
    <script src="/static/js/bootstrap-tooltip.js"></script>
    <script src="/static/js/bootstrap-popover.js"></script>
    <script src="/static/js/bootstrap-button.js"></script>
    <script src="/static/js/bootstrap-collapse.js"></script>
    <script src="/static/js/bootstrap-carousel.js"></script>
    <script src="/static/js/bootstrap-typeahead.js"></script>
{% endblock javascript %}
 </head>
  <body>
  {% block header %}

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <div class="nav-collapse">
                    <ul class="nav">
                      <li class="active"><a href="/">Home</a></li>
                      <li class=""><a href="/movies-recs">Recommendations</a></li>
                    </ul>
              </div>
              <div>
                    <form class="navbar-search pull-left" action="{% url 'home' %}" method="POST">
                      {% csrf_token %}
                       <div style="overflow: hidden; padding-right: .5em;">
                         <input type="text" name="data" style="width: 70%;" />
                         <input type="submit" name="search" value="search" size="30" style="float: right" />
                        </div>
                    </form>
             </div>

           {% if user.is_authenticated %}
            <form class="navbar-search pull-right" action="{% url 'home' %}" method="GET">
                <ul class="nav">
                   <div style="overflow: hidden; padding-right: .5em;">
                     <li style="background-color:#C92525;font-size:14px" class="">{{user.get_username}} </li>
                     <li class=""><a href="/signout">sign out</a></li>
                    </div>
                </ul>
            </form>
            {% else %}
            <form class="navbar-search pull-right" action="{% url 'auth' %}" method="GET">
              {% csrf_token %}
               <div style="overflow: hidden; padding-right: .5em;">
                 <input type="submit" name="auth_method" value="sign up" size="30" style="float: right" />
                 <input type="submit" name="auth_method" value="sign in" size="30" style="float: right" />
                </div>

3 个答案:

答案 0 :(得分：1)

如您在代码段中所见，您的代码可以正常工作。您可能只是为图片提供了错误的路径

<html lang="en">
<head>
<meta charset="utf-8">
<title>POPCORN TIME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<style type="text/css">
html{ 
      background: url(http://placekitten.com/200/300) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }

 </style>





{% block stylesheets %}
    <!-- Bootstrap provided CSS files. -->
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <style type="text/css" >
      body {
        padding-top: 60px;
        padding-bottom: 40px;

      }

    </style>
    <link href="/static/css/bootstrap-responsive.css" rel="stylesheet">
{% endblock stylesheets %}

   {% block javascript %}

    <!-- Bootstrap related javascript files -->

    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/bootstrap-transition.js"></script>
    <script src="/static/js/bootstrap-alert.js"></script>
    <script src="/static/js/bootstrap-modal.js"></script>
    <script src="/static/js/bootstrap-dropdown.js"></script>
    <script src="/static/js/bootstrap-scrollspy.js"></script>
    <script src="/static/js/bootstrap-tab.js"></script>
    <script src="/static/js/bootstrap-tooltip.js"></script>
    <script src="/static/js/bootstrap-popover.js"></script>
    <script src="/static/js/bootstrap-button.js"></script>
    <script src="/static/js/bootstrap-collapse.js"></script>
    <script src="/static/js/bootstrap-carousel.js"></script>
    <script src="/static/js/bootstrap-typeahead.js"></script>
{% endblock javascript %}
 </head>
  <body>
  {% block header %}

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <div class="nav-collapse">
                    <ul class="nav">
                      <li class="active"><a href="/">Home</a></li>
                      <li class=""><a href="/movies-recs">Recommendations</a></li>
                    </ul>
              </div>
              <div>
                    <form class="navbar-search pull-left" action="{% url 'home' %}" method="POST">
                      {% csrf_token %}
                       <div style="overflow: hidden; padding-right: .5em;">
                         <input type="text" name="data" style="width: 70%;" />
                         <input type="submit" name="search" value="search" size="30" style="float: right" />
                        </div>
                    </form>
             </div>

           {% if user.is_authenticated %}
            <form class="navbar-search pull-right" action="{% url 'home' %}" method="GET">
                <ul class="nav">
                   <div style="overflow: hidden; padding-right: .5em;">
                     <li style="background-color:#C92525;font-size:14px" class="">{{user.get_username}} </li>
                     <li class=""><a href="/signout">sign out</a></li>
                    </div>
                </ul>
            </form>
            {% else %}
            <form class="navbar-search pull-right" action="{% url 'auth' %}" method="GET">
              {% csrf_token %}
               <div style="overflow: hidden; padding-right: .5em;">
                 <input type="submit" name="auth_method" value="sign up" size="30" style="float: right" />
                 <input type="submit" name="auth_method" value="sign in" size="30" style="float: right" />
                </div>

答案 1 :(得分：0)

我相信您可能在代码中缺少引号：

尝试更改

background: url(popcorn.jpg)

到

background: url("popcorn.jpg")

答案 2 :(得分：0)

我将背景样式设置为以下HTML标记之一，而不是HTML本身。

* { }

或

身体{ }

我还将“ background：url（popcorn.jpg）”更改为background-image：url（“ popcorn.jpg”）;因为您只将一种样式分配给背景。

相关问题
最新问题