How to put an image as a background in HTML/CSS - html

Question

I encountered a problem while I tried to add an image to my blog. I was trying to put my image as a background and it did not work. How do I solve this.I also want it to cover the entirety of my blog's body.
{% 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>{{post.title}} - {{post.author.first_name}} {{post.author.last_name}} -
{{ post.post_date }} <small>
{% if user.is_authenticated %}
- (Edit)
(Delete)
{% endif %}
</small><br/>
{{post.body|slice:":200" }}</li>
{% endfor %}
</ul>
{% endblock %}

Answer 1

In your background image url you mistakenly pasted the img tag url alongside the class and alt attribute just replace
background-image: url('https://media.vanguardcommunications.net/blog-e1505840253663.jpg" alt="A blog" class="main-img');
with this
background-image: url('https://media.vanguardcommunications.net/blog-e1505840253663.jpg');

Answer 2

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