Engrave with!!
手彫り工房ブログ

手彫り工房のオフィシャルブログです。金属彫ってます。彫ってます。

背景画像を変えようとして、css3に手を出した所

2016
02
こんにちは。

宣言通り、ちょこちょこ変え始めました。
いいものないかな~と探したりもしたのですが、前にお店の背景画像をつくった記事のやつにしました。
(使いまわし!)

右側と左側で別々の背景画像を!


背景画像を右と左で違うのにしたかったんですよね。
もちろん、中央は空白。

背景6

背景8


1枚の壁紙で対応できなくもないんですが、模様がゆがんだり、読み込みが重くなりそうで嫌だったんですよね。
事実、前の壁紙は重かったです。
しかし、cssでは壁紙を同じ空間に2つは張れなかったんですね。
こう、ちょっと分けなきゃいけないんです。多分(笑)

css3の便利さよ!


cssではいろいろ工夫しないといけなかったところ、css3では何と「,(カンマ)」一つ入れるだけで解決。
なんてこった!
しかも、これを使えば半透明の背景にさらに別の背景を合わせて・・・みたいなこともできます。
いや、それだけじゃない。
動く背景と合わせれば、もっといろいろできる?!
といっても、背景動かすには、JQueryとかいるのかな?

ととと・・・脱線してしまいました。

もちろんbackground-positionやbackground-repeatなども使っておりますが、
このようにcss3はけっこう便利な機能があります。
ちょっと前まで対応していないPCがけっこうあったみたいなんですが、最近はもう大丈夫だと思うので、隙あらば使っていきますよ~。

それでは。