[英]How to put an image as a background in HTML/CSS
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><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 %}
In your background image url you mistakenly pasted the img tag url alongside the class and alt attribute just replace在您的背景图像 url 中,您错误地将 img 标签 url 粘贴到 class 和 alt 属性旁边,只需替换
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');
You can use these styles您可以使用这些 styles
body {
background-image: url('https://media.vanguardcommunications.net/bloge1505840253663.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
width: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.