如何在 HTML/CSS 中将图像作为背景

Question

我在尝试将图像添加到我的博客时遇到了问题。 我试图将我的图像作为背景，但它不起作用。 我该如何解决这个问题。我还希望它覆盖我博客的整个正文。

{% extends 'base.html' %}

{% block content %}
 
<style>
body {
  background-image: url('https://media.vanguardcommunications.net/blog-e1505840253663.jpg" alt="A blog" class="main-img');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>


<h1>Posts</h1>

<ul>
{% for post in object_list %}
    <li><a href="{% url 'article-detail' post.pk %}">{{post.title}}</a> - {{post.author.first_name}} {{post.author.last_name}} -  
        {{ post.post_date }} <small>

        {% if user.is_authenticated %}
            - <a href="{% url 'update_post' post.pk %}">(Edit)</a>

            <a href="{% url 'delete_post' post.pk %}">(Delete)</a>

        {% endif %}


    </small><br/>
    {{post.body|slice:":200" }}</li>
{% endfor %}
</ul>


{% endblock %}

Answer 1

在您的背景图像 url 中，您错误地将 img 标签 url 粘贴到 class 和 alt 属性旁边，只需替换

 background-image: url('https://media.vanguardcommunications.net/blog-e1505840253663.jpg" alt="A blog" class="main-img');

有了这个

 background-image: url('https://media.vanguardcommunications.net/blog-e1505840253663.jpg');

Answer 2

您可以使用这些 styles

body {
     background-image: url('https://media.vanguardcommunications.net/bloge1505840253663.jpg');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     height: 100vh;
     width: 100%;
}