Quantcast
Channel: 初心者タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 21085

【css】複数画像を背景に指定して固定する

$
0
0

仕上がりはこんな感じ

5d820030a2593bf15b9060b8512bac73.gif

どのような指定をしたか

複数指定することがあまりないのでピンときませんが、
ちょい足しでできるようです。
「,」カンマで区切って複数指定する方法で、下記のようになります。

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個目の指定が適用されるようです。

d97bf43a75cfd5d5b29846ac2693d532.png

デモページ

http://okachanblog.com/static/20191124background/

ひとこと

一枚画像作ろうと思ってたけどこの方法を知って、
複数配置をちょい足しで実装できたので画像作る手間省けました!
ラッキー!

参考記事

CSS での複数の背景の利用方法
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds


Viewing all articles
Browse latest Browse all 21085

Trending Articles