🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

4400閲覧

flaskで背景画像を表示させたい

n_k23

総合スコア21

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/01/13 07:43

編集2021/01/13 09:08

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}

色々試行錯誤しましたがうまく解決できませんでした。
お力をもらえないでしょうか。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2021/01/13 07:55

「背景画像」とはテンプレートコードの中で言うと、どれですか?
n_k23

2021/01/13 08:03

失礼しました。 base.htmlのbodyタブのdivタブの後に記述していました。
Lhankor_Mhy

2021/01/13 09:01

.img-fluidには、特にスタイルを当ててないのですか?
n_k23

2021/01/13 09:09

失礼しました。 img-fluidクラスにもbackground-imageを記述してみましたが変化がありませんでした
Lhankor_Mhy

2021/01/13 14:32

cardにbackground-imageを当てるやり方ではいけないのですか?
n_k23

2021/01/14 00:56

cardにbackground-imageを当ててみましたが変化がありませんでした。
Lhankor_Mhy

2021/01/14 01:11

それは、画像が表示されていない、ということでしょうか? 画像のパスを直接ブラウザで表示させると、表示されますか?
n_k23

2021/01/14 02:32

画像が表示されませんでした。 直接表示させるとブラウザでは表示できました。
Lhankor_Mhy

2021/01/14 02:36

../static/img/084AME0226_TP_V.jpg の相対パスは修正しましたか?
guest

回答1

0

CSSのbackground-image: url(../img/084AME0226_TP_V.jpg);部分の話でしょうか?

何も設定をいじっていないなら/static/img/ファイル名を指定したら表示されませんか?
urlはurl("")のように指定するようなので、url("/static/img/084AME0226_TP_V.jpg")みたいな感じでしょうか?

投稿2021/01/14 04:51

FiroProchainezo

総合スコア2421

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問