flaskでアプリを作成する際に背景画像をHTMLテンプレート内で統一して使いたい。
画像は表示できるがコンテンツの上下にしか表示できない。
base.htmlのbodyタブ内に記述してみたがNG
index.htmlに記述してみたがNG
cssで新たにclassを指定し記述したがNG
・Bootstrapを使用
・画像 https://gyazo.com/3080d04de5ff87d10217646cb44b0f13
実現したいこと
postで表示されるカードの背景にimg画像を記述したい
html
1`base.html` 2<!DOCTYPE html> 3<html lang="en"> 4 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}"> 9 <title>Todoアプリ</title> 10 {% block head %} 11 {% endblock %} 12</head> 13 14<body> 15 <nav class="navbar navbar-light bg-light p-3"> 16 <a class="navbar-brand pl-3" href="/" style="font-size: 2rem;">Todoアプリ</a> 17 </nav> 18 <div> 19 <img src="../static/img/084AME0226_TP_V.jpg" class="img-fluid" alt="Responsive image"> 20 {% block body %} 21 {% endblock %} 22 </div> 23</body> 24 25</html>
html
1{% extends 'base.html' %} 2 3 4{% block body %} 5<a class="btn btn-info btn-lg m-5" href="/create" role="button">新規投稿</a> 6<div> 7 {% for post in posts %} 8 <div class="card w-50 mb-3" style="margin: auto;"> 9 <div class="card-body"> 10 {% if post.due.date() < today %} 11 <div class="alert alert-warning" role="alert"> 12 期限切れです! 13 </div> 14 {% endif %} 15 <h2 class="card-title">{{ post.title }}</h2> 16 <p>期限 : {{ post.due.date() }}</p> 17 <a class="btn btn-secondary btn-sm" href="detail/{{ post.id }}" role="button">詳細</a> 18 <a class="btn btn-success btn-sm" href="update/{{ post.id }}" role="button">編集</a> 19 <a class="btn btn-danger btn-sm" href="delete/{{ post.id }}" role="button">削除</a> 20 </div> 21</div> 22{% endfor %} 23</div> 24 25 26 27{% endblock %}
css
1html { 2 font-family: sans-serif; 3 line-height: 1.15; 4 -webkit-text-size-adjust: 100%; 5 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 6} 7 8article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { 9 display: block; 10} 11 12body { 13 margin: 0; 14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 15 font-size: 1rem; 16 font-weight: 400; 17 line-height: 1.5; 18 color: #212529; 19 text-align: left; 20 background-color: #fff; 21 background-image: url(../img/084AME0226_TP_V.jpg); 22} 23.img-fluid { 24 max-width: 100%; 25 height: auto; 26}
色々試行錯誤しましたがうまく解決できませんでした。
お力をもらえないでしょうか。
よろしくお願いします。