仕上がりはこんな感じ
どのような指定をしたか
複数指定することがあまりないのでピンときませんが、
ちょい足しでできるようです。
「,」カンマで区切って複数指定する方法で、下記のようになります。
style.css
body{background-image:url(img/hidoi_reply_yokeru_woman.png),url(img/hidoi_reply.png);background-repeat:no-repeat,no-repeat;background-position:left,right;background-position-y:top,top;background-attachment:fixed,fixed;background-size:40%,40%;}
第一引数、第二引数みたいな感じで、1個目に指定した画像には、
background-repeatなどのプロパティの1個目の指定が適用されるようです。
デモページ
http://okachanblog.com/static/20191124background/
ひとこと
一枚画像作ろうと思ってたけどこの方法を知って、
複数配置をちょい足しで実装できたので画像作る手間省けました!
ラッキー!
参考記事
CSS での複数の背景の利用方法
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds