質問: ### 前提・実現したいこと Webページの写真上に文字を書けるようにする。 ### 発生している問題・エラーメッセージ トップ画像では上手くいったのですが、フッター画像の方では写真上に文字を書くことができません。 上手くいったトップ画像のようにコードを書いてもフッター写真には書くことができず、全てトップ画像に反映されます。 ``` エラーメッセージ ``` ### 該当のソースコード ``` ソースコード ホストになる お部屋のタイプは? まるまる貸切 宿泊可能な人数は? ゲスト4人 どこにありますか? Anjo ひと月あたり最大¥49,879の収入* はじめる 予想ホスティング収入額の計算方法 ホスティングで実 現する、自分らし いライフスタイル ホスティングで広がる可能性 柔軟な働き方を楽しみながら、ホスティン グを通して、好きな事をするた めの収入アップや長く続く友情関係にめぐ りあう機会を得てみませんか。 ホスティングの世界を知ろう 安心のホスティング 24時間365日対応サポート、頼れるホスト コミュニティからツールのカスタム設定、 ヒント・実践アドバイスのご提供まで、 Airbnbが全良でホストの成功をサポートし ます。 Airbnbによるホストのサポート体制 ホスティングのおかげで、自分 の創造性を活かすことができ、 また家族と過ごす時間も増えました。 Darrelさん 米ショージア州アトランタのホスト ホストになる お部屋のタイプは? まるまる貸切 宿泊可能な人数は? ゲスト4人 どこにありますか? Anjo ひと月あたり最大¥51,059の収入* はじめる ホスティングをはじめる前に... Airbnbでホスティングする理由 リスティングの方法からお部屋の準備まで、ホスティングの始め方を学びましょう。 Airbnbでホスティングをはじめるには 料金設定と受け取り金についてホスト全員が知っておくべき点。 Airbnbで収入を得る方法 どんなお部屋にもぴったりのゲストがいます。重要なのは、お部屋についてゲストに正しくお伝えておくことです。 Airbnbで貸し出すお部屋に求められる条件は? 迅速な対応からキャンセル回避まで、重要なポイントを以下にご紹介します。 Airbnbのサポート体制 ホストを守るプログラム 万が一の事故の際にホストのみなさまをお 守りするため、Airbnbのほおトンドの予約に はそれぞれUS$1,000,000を限度とする物損 補償と賠償責任保険が自動付帯されます。 ホストを守るAirbnbの取り組み 新型コロナウィルスの安全ガイドライン コミュニティのみなさまの健康を守るた め、Airbnbは専門家と連携し、メンバー全 員のための安全対策とホスト向けの清掃ス タンダートを作成しました。 Airbnb清掃スタンダードについて知る 高いゲスト基準 ホストの皆様にご按針いただくため、 Airbnbでは、予約前にゲストに身分証明書 の提示を求め、過去のホストによるゲスト のレビューを閲覧できるようにしていま す。Airbnbの新しいゲスト基準ポリシー は、これまで以上に高い行動基準をゲスト に求めるものです。 安心してホスティングしていただくための取り組み ホスティングをはじめよう 詳細を確認して熟練ホ ストつながろう ホスティングに役立つ情報ならびに経験豊富なホストがみなさまの 質問にお答えするライブ配信のオンラインセミナーへのアクセスを 提供いたします。ご希望の方は必要事項をご記入ください。 Airbnbから不定期に配信されるホスティングのヒントやお役たち情報の受 信を希望します。また、配信解除はいつでもできる事を理解しました。 登録する 私は「登録する」を選択することで、Airbnbの個人情報保護ポリシーに従って Airbnbが私の個人情報を処理することに同意します。 企業情報 Airbnbのご利用方法 ニュースルーム 株主・投資家のみなさまへ Airbnb Plus Airbnb Luxe HotelTonight Airbnbビジネスプログラム ホストのおもてなしがもたらす、特別な旅 採用情報 共同創業者からの手紙 コミュニティ ダイバーシティ&ビロンギング アクセシビリティ対応 Airbnbアソシエイト ゲストの紹介 Airbnb.org ホスト 宿泊をホストする オンライン体験をホストする 体験をホストする 責任あるホスティング リソースセンター コミュニティセンター サポート Airbnbの新型コロナウィルスに対する取り組み ヘルプセンター キャンセルオプション 近隣コミュニティーサポート 信頼&安全 Airbnb Global Services Limited 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日) ©️2021Airbnb,Inc.・プライバシー・利用規約・サイトマップ・企業情報 日本語(JP) ¥JPY body{ margin: 0; } .head-image { position: relative; } .text { color: white; font-size: 18px; position: absolute; top:120px; left:50px; } strong { font-size: 23px; } span { color: red; } p { font-size: 15px; } .button a { color: white; border-radius: 5px; background-color: red; padding: 10px 30px; text-decoration: none; } h1 { font-size: 32px; } .button { margin: 10px 0; } main-visual { display:flex; justify-content: space-evenly; } .main { display:flex; justify-content: space-evenly; margin: 120px 0; } .main-content { font-size: 32px; } .main-image { margin: 0 60px 60px 60px; position: relative; border-radius: 5px; } /* .text-message { position: absolute; color: white; font-size: 18px; top:120px; left:50px; */ /* } */ .images { display:flex; margin-bottom: 30px; } .image { margin: 30px; } .supports { display: flex; } .support { margin: 60px; } /* .footer-image { position: relative; */ } .details { display: flex; } input[type=checkbox] { width: 20px; height: 20px; } .footer-details { display: flex; } .footer-detail { margin: 20px 30px; } .registration a { margin: 20px 20px; background-color: black; padding: 15px 20px; text-decoration: none; color: white; border-radius: 5px; } .registration { margin: 30px 0 30px 0; } .none { font-size: 12px; } ``` ### 試したこと position: relative,position: absoluteを試してみましたが、上手くいかずです。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: タイトルやコンテンツなどテキスト要素の背景に画像を表示させたいとき、 img要素に対してposition: absolute などで絶対配置しようとするといろいろ複雑になり面倒です。 CSSのbackground-imageプロパティを使って背景画像として表示させるのが簡単です。 background-image - CSS: カスケーディングスタイルシート | MDN 例えば、footer全体の背景に画像を表示させたいのなら、 ``` footer { background-image: url("images/3-1-1.jpeg"); background-size: cover; } ```