简体   繁体   English

使身体背景适合整个屏幕

[英]Making body background fit the entire screen

This is likely a very easy question but I've tried all of the solutions posted and none of them seem to work for me. 这可能是一个非常简单的问题,但是我尝试了所有已发布的解决方案,但似乎没有一个适合我。

I would simply like the gradient applied to my <body> HTML tag to always fit the screen properly. 我只是希望将渐变应用于我的<body> HTML标签以始终适合屏幕。 Whenever I view the browser in a smaller resolution such as this, and try to scroll over, the background appears as such. 每当我以这种较小的分辨率查看浏览器并尝试滚动时,背景就会这样显示。

Furthermore, if I turn off background-repeat, it just gets filled with white. 此外,如果我关闭背景重复功能,它只会变成白色。

网页错误

Here is my base.html: 这是我的base.html:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>
    <link rel="shortcut icon" href="{% static 'assets/favicon.png' %}"/>
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
    <link href="{% static 'css/bootstrap-social.css' %}" rel="stylesheet">
    <link href="{% static 'base.css' %}" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Aladin" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
    {% block head-extras %}{% endblock %}
  </head>
  <body>
    <nav class="navbar navbar-toggleable-md bg-white">
      <div class="container">
        <a href="/home" class="navbar-brand">
          <h1 id="logo" class="nav-wel">Pomodoro</h1>
        </a>
        {% if request.user.is_authenticated %}
          <div class="status">Balance:&nbsp;{{ request.user.profile.coins }}<img class="coin-img" src="{% static 'assets/coin.png' %}" height="40px" width="auto"></div>
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle welcome nav-wel" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" id="welcome">Welcome {{ user.get_username }}</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="/shop">Shop</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/leaderboard">Leaderboard</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/users/change-password">Change Password</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/users/logout">Logout</a>
              </div>
            </li>
          </ul>
        {% endif %}
      </div>
    </nav>
    {% block content %}
    {% endblock %}
    <script src="{% static 'js/jquery-3.2.1.js' %}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
    <script src="{% static 'js/pomodoro.js' %}"></script>
  </body>
</html>

and the css: 和CSS:

body {
  background: #c2e59c;
  background: -webkit-linear-gradient(to right, #c2e59c, #64b3f4);
  background: linear-gradient(to right, #c2e59c, #64b3f4);
}

Try to add your style in html tag instead : 尝试在html标签中添加样式:

html {
height: 100%;
background: #222d69;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;    
background-repeat:no-repeat;
background: -webkit-linear-gradient( to left top, blue, red);
background: -moz-linear-gradient( to left top, blue, red);
background: -ms-linear-gradient( to left top, blue, red);
background: -o-linear-gradient( to left top, blue, red);
background: linear-gradient( to left top, blue, red);
}

https://jsfiddle.net/emilvr/qqdg9654/ https://jsfiddle.net/emilvr/qqdg9654/

Update : 更新:

Just add this one , your body background and background-color should be reset : 只需添加此内容,您的身体背景和背景色应重置:

body{
   background:none;  
   background-color:none;
}

You can add this to the top of your css file: 您可以将其添加到css文件的顶部:

html, body {
    padding:0px;
    margin:0px;
}

There is also a css library called "normalize" that should take care of that for you. 还有一个名为“ normalize”的css库,应该为您解决这个问题。

body {
 margin: 0;
 min-height: 100vh;
 background: #c2e59c;
 background: -webkit-linear-gradient(to right, #c2e59c, #64b3f4);
 background: linear-gradient(to right, #c2e59c, #64b3f4);
 background-size: fixed;
}

Try to use bg size and a min-height 尝试使用bg大小和最小高度

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM