HOMEWeb制作CSSのbackground-imageで左右に別々の背景画像を表示する方法CSSのbackground-imageで左右に別々の背景画像を表示する方法2019.03.09Web制作Bこんにちは、ryohei(@ityryohei)です!CSSのbackground-imageで要素の左右に別々の背景画像を表示する方法のご紹介です!background-image自体はとても便利なプロパティでよく利用するのですが、基本的に単一の背景画像を表示したい場合に利用していました。単一の背景画像を表示するだけでも非常に便利なbackground-imageですが、今回、複数の画像を設定できないかと思い調べたところ、簡単に実装できることがわかりました。background-imageでやりたいこと今回、background-imageでやりたいのは、左右に別々の背景画像の設定です。具体的には下記のようにしたいのです。今回実装したいことは明確なので、いつもお世話になっているMDN先生で調べたところ、なんとbackground-imageは元々複数枚の画像を設定することができるとのことです。設定方法は簡単で、プロパティに複数の値を追加していけば良いとのことです。複数の背景画像を設定してみましょう![ads_middle]background-imageで左右に別々の背景画像を表示するHTML今回は背景を設定するだけなので、タグの中は空の状態にしておきます。<article></article>CSS次にCSSです。background-imageを複数設定する場合はカンマで区切ってそれぞれの設定を追記していきます。各プロパティを設定する順番はbackground-imageで記述した順番になるように注意しましょう。100px;}DEMO上記で記述したHTMLとCSSに要素のスタイルを少し追加すると下記のようになります。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。