androidで、非表示の要素を表示させたときに背景画像設定が消える現象が発生しました。
調べてみたところ、background-sizeの書き方に問題がありました。

before

css

   background: url(../../hogehoge.jpg) left top repeat-y;
   background-size: 100% auto;

100% auto という記載に問題がありました。

after

css

   background: url(../../hogehoge.jpg) left top repeat-y;
   background-size: 100%;

これで直りました。

この記事の扱い方

この記事は、HTMLを学び始めた私が、どこかに学んだことを残すことを目的として書き始めたものです。連載的な感じで書き続けていきます。

HTMLの仕組み

HTMLでは、テキストにタグと呼ばれる印をつけていきます。テキストをタグで囲むことで、テキストに「見出し」や「段落」などの意味を持たせます。以下で、仕組みを見ていきましょう。

そもそもHTMLとは？

HTMLとは、Hyper Text Markup Language の略で web サイトやアプリ、電子メールなどを適切に表示するために使用されています。 また HTML はマークアップ言語の一種になり、JavaScript や PHP などのプログラミング言語とは異なる存在になります。 文章や画像などのコンテンツ表示以外に、CSS（レイアウト）やJavaScript（動き）などのプログラムと併用して使うこともできます。 本格的なプログラマーを目指さない方にとっても、メールやブログでも使われている HTML を知っておくと、充実したインターネット・ライフを送ることができると思います。【(https://blog.codecamp.jp/what_is_html) より引用。】

開始タグと終了タグ

テキストをタグで囲む際には、開始タグと終了タグで囲みます。

index.html

<h1>見出し</h1>

上の例のように開始タグと終了タグで囲みます。(< h1 >に関しては後で説明をしていきます。)
終了タグには「/」が必要なので忘れないでください。これをChrome等のブラウザで開くと、

のように、出力することができます。

見出しをつける

記事を書く際に、見出しをつけることは読みやすさの点で重要です。HTMLで見出しをつけるには、先ほど少し登場した< h1 >を使用します。また、見出しの大きさには数種類あり、hの後ろに付ける番号で大きさを変えていきます。

index.html

<h1>これがh1の大きさ</h1>
<h2>これがh2の大きさ</h2>
<h3>これがh3の大きさ</h3>
<h4>これがh4の大きさ</h4>
<h5>これがh5の大きさ</h5>
<h6>これがh6の大きさ</h6>

これを出力してみると、

という感じに出力されます。上記コードをQiita画面にベタ打ちしてみると、以下の画像のように

その大きさを体感することができました（笑）

開発環境(2019.03.07現在)

• MacBook Air (13-inch, Early 2015)
• macOS Mojave
• ver10.14.3

HTML エディタ

私は、cotEditorを用いています。（確かMacにはデフォルトであったような・・・）

コードを書いていくと、こんな感じになります。

まあ参考ほどに（笑）

この記事の扱い方

この記事は、HTMLを学び始めた私が、どこかに学んだことを残すことを目的として書き始めたものです。随時更新していきます。

HTMLの仕組み

HTMLでは、テキストにタグと呼ばれる印をつけていきます。テキストをタグで囲むことで、テキストに「見出し」や「段落」などの意味を持たせます。以下で、仕組みを見ていきましょう。

開始タグと終了タグ

テキストをタグで囲む際には、開始タグと終了タグで囲みます。

index.html

<h1>見出し</h1>

上の例のように開始タグと終了タグで囲みます。(< h1 >に関しては後で説明をしていきます。)
終了タグには「/」が必要なので忘れないでください。これをChrome等のブラウザで開くと、

のように、出力することができます。

見出しをつける

記事を書く際に、見出しをつけることは読みやすさの点で重要です。HTMLで見出しをつけるには、先ほど少し登場した< h1 >を使用します。また、見出しの大きさには数種類あり、hの後ろに付ける番号で大きさを変えていきます。

index.html

<h1>これがh1の大きさ</h1>
<h2>これがh2の大きさ</h2>
<h3>これがh3の大きさ</h3>
<h4>これがh4の大きさ</h4>
<h5>これがh5の大きさ</h5>
<h6>これがh6の大きさ</h6>

これを出力してみると、

という感じに出力されます。上記コードをQiita画面にベタ打ちしてみると、以下の画像のように

その大きさを体感することができました（笑）

開発環境(2019.03.07現在)

• MacBook Air (13-inch, Early 2015)
• macOS Mojave
• ver10.14.3

HTML エディタ

私は、cotEditorを用いています。（確かMacにはデフォルトであったような・・・）

コードを書いていくと、こんな感じになります。

まあ参考ほどに（笑）

結論: 実際のフォーマットと拡張子やContent-Typeが違っていても表示はされます。

フォーマットと拡張子とContent-Type

例えばPNG画像は、ファイルの拡張子.pngで保存して、Content-Typeをimage/pngで配信するものとされています。

これらが「ちぐはぐ」だったらブラウザはどう解釈するのか実験してみました。

経験的には実際のフォーマットに従ってちゃんと表示されますが、裏付けになる資料があるといいなと思って結果を共有します。

この辺の挙動はHTMLの勧告に記述がありそうな気もしますがサクッと見つけられず(詳しい方教えてください！)。

実験用のページ

こんなページを用意しました。

https://www.ideamans.com/_experimental/image-format-ext-content-type/

JpegとPNGについて、実際の内部フォーマット、拡張子、Content-Typeヘッダのすべての組み合わせで画像を表示します。

正しい組み合わせの画像は背景色を緑、拡張子かContent-Typeあるいはその両方が内部フォーマットと異なる画像は背景色を赤としています。

これらの画像がすべて表示されれば、そのブラウザは実際の内部フォーマットに従って表示しているということになります。

検証

横着してBrowser Screenshotsを利用しました。

https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/?url=https%3A%2F%2Fwww.ideamans.com%2F_experimental%2Fimage-format-ext-content-type%2F

すべて問題なく表示されていますね。

ついでにBrowsershotsでも。

http://browsershots.org/https://www.ideamans.com/_experimental/image-format-ext-content-type/

いくつか非対応なのか不具合なのかわからないブラウザもありますが、かなりドマイナーなのでよしとしましょう。

最後に

なぜこの実験をしたのかというと、WebPの配信はしばらくJpegやPNGのレスポンスを差し替える方法が主流になりそうだからです。

image.pngへのリクエストを内部的にWebPにルーティングして、Content-Type: image/webpとして返す、という方法ですね。

拡張子が.jpgや.pngでもWebP画像を配信しちゃっても表示される裏付けが欲しかったのです。

もちろんバラバラでもいいという意図ではないので、拡張子やContent-Typeはお行儀良く指定しましょう！