誰からも相談されていないのに、勝手に答えていくことに、面白みを感じ始めている、ユゲタです。
今回のお悩みは、ラーメン屋さんのホームページを作っている人が、背景画像の表示が思ったようにうまくいかないという状況での質問のようです。
ただし、実際にラーメン屋さんのホームページなのかどうかは、ソースコードを見て僕が勝手に想像をしているだけで、この人がラーメン屋さんの店主で、ホームページを作って今どきのweb対応をしょうと、コロナ渦の中、なれないパソコンを使って一生懸命htmlコーディングをしている風景が頭に浮かぶのですが、こうした妄想も、全くもって勝手な想像です。
でも、そんな一途な店主（勝手な想像）を見過ごすわけにはいかないので、サクッと解決してみたいと思います。
質問詳細
https://teratail.com/questions/286442
「background-imageで背景が全部出てこない」
プログラミング初心者です
お手柔らかにお願いします
# 前提・実現したいこと
背景をすべて出したい
# 発生している問題・エラーメッセージ
class="storephoto" 子要素の部分の高さまでしか背景が出てきません
# 該当のソースコード
...※長いので割愛...
# 試したこと
background-imageをつけたclass="storephoto"の親要素にheightで高さ設定しましたが変わりません。
class="storephoto"にz-index:10;をつけても変わりませんでした
実はソースコードからローカル環境に簡易サイトを作ってダミー画像として背景画像を入れて作ってみましたが、画面一番下に、背景画像が出てきて、この時に背景画像を全表示したいというのが質問なのでしょうか？
回答数が１０日以上経って０件なので、今後も返答がない可能性が高いので、今回取り上げてみました。
おそらく「店舗情報」の内部リンクが付けられているようなので、ここに店舗の内装写真などを薄く表示しながら、手前に店舗紹介の文章を表示しようとしているのだろうと、勝手に想像して、この位置で想定の画像表示ができるようにするために、いくつかの方法があることを提案したいと思います。
解決方法
何パターン化の方法があるので、まずはそれらを紹介したいと思います。
1. 背景画像を使わずに、imageを表示する。
バナーを表示するような感覚で、ページの構成を考え直す。
そのバナーにリンクを埋め込んだり、色々な効果計測ができるというマーケティングメリットもあるので、背景画像はあくまで単なる装飾ですが、UIを検討してみるというのもありかもしれません。
2. 背景画像の全体表示を可能にする、background-size
CSSで、"background-size:cover;"を付けることにより、背景画像がその対象要素全体に対して、全画面表示されるように、トリム表示させることができます。
ちなみに、"background-contain;"とすると、画像を全て表示してくれますが、上下左右のサイズが違う要素の場合は、隙間が表示されてしまいます。
ほかにも、数値や%表記で、直接サイズ指定することもできるので、"background-size"を使うことで、お悩みの解決はできるのではないかと思います。
質問の文面に対してのコメント
この質問者が何故回答0件だったのかを分析すると、少し質問の意味がわからないという事だと思います。
背景がうまく表示されないという場合は、今現在どういう表示がされているか、スクリーンショットなどを貼り付けたら一目瞭然で、それをどういう状態にしたいかを文章で書けばいいだけなんですが、クラス名と、"子要素の部分の高さまでしか背景が出てきません"という文章では、全く意味がわかりません。
きっと、ラーメンを作る事に人生を捧げてきて、ホームページも、文章も苦手なんでしょう・・・
次に、内容を全部貼り付けているであろう、ソースコードも、これをレンダリングしても、背景画像が書かれておらず、再現されませんでした。
簡易に行いたいのであれば、
codepenなどのサイトを使って、embedさせることで、コード表示も兼ねてくれるので、
質問者は、明確な回答が欲しい場合は（誰でもそうだと思いますが）、実際に回答をしてくれる人たちに、無駄な手作業をさせないという事もひとつのおもてなしです。
こうしたサイトで回答してくれる人は、snsにツィートする感覚で、めんどくさいことなどはやりたがるはずがありません。
ラーメン修行の次は、コミュスキルの向上ですね。
0 件のコメント:
コメントを投稿