時悠帖・五差路

まだ若いつもりでいたがついに老いを隠せなくなった爺の 時悠生活雑記

What's up? ついでに

記事に貼り付けた画像をあたかも背景画像のように固定表示する。1枚の写真が画面いっぱいに大きく映っているが画面スクロールで次の1枚が画面下から現れてくる。

例えば、淡墨桜は蕾のときがピンク色、次いで満開の白色、そして散り始めるころに薄墨色という流れの写真を記事に単に貼り付けるのではなく、画像の現れ方を変えてみる。

といっても理解しにくいですから実際に見て頂きたく…
「五差路写真館*1

---

↑ 2017/03/24

↑ 2017/04/04

↑ 2017/04/06

---

残念なことに、PC以外(スマホ等)では単なる写真の貼付にしか見えません。次のような感じなのですが。

f:id:saitoy05:20171214082643j:plain:w400
f:id:saitoy05:20171214082644j:plain:w400
f:id:saitoy05:20171214082645j:plain:w400
f:id:saitoy05:20171214082646j:plain:w400
f:id:saitoy05:20171214082647j:plain:w400

(デザイン/カスタマイズ/デザインCSS
.image-fixed {

   width: auto;
   height: auto;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
   text-indent: 900px;
   white-space: nowrap;
   overflow: hidden;
}
(記事作成はHTML編集)
<p class="image-fixed" style="background-image: url('https:// … .jpg');"><img src="https:// … .img"></p>

<p>↑ 2017/03/24</p>
<p class="image-fixed" style="background-image: url('https:// … .jpg');"><img src="https:// … .img"></p>
<p>↑ 2017/04/04</p>
<p class="image-fixed" style="background-image: url('https:// … .jpg');"><img src="https:// … .img"></p>
<p>↑ 2017/04/06</p>

もっといい方法はないものでしょうか。

*1:2020/04/30 カテゴリー[五差路写真館]としてこのブログに統合しました