勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

CSSで一つの要素に対して複数の背景色を指定する方法

   2024/01/13  CSS

1つのdiv要素に対して複数の背景色をつけたかった。background-colorとかでなんとかなるのかな、と思ったけど無理らしい。background-colorとbackground-imageを使う以下の方法でいけた。

 

サンプル

https://taitan916.info/sample/background-image/

 

ソース

<html>
<head>
<style>
div.divarea{
    height: 400px;
    width: 400px;
    border: solid 3px #000;
    background-color: #02d101;
    background-image: url(./h200.jpg);
    background-position: left bottom;
    background-repeat: repeat-x;
    margin-bottom: 10px;
}

div.divarea2{
    height: 400px;
    width: 400px;
    border: solid 3px #000;
    background-color: #02d101;
    background-image: url(./w200.jpg);
    background-position: right top;
    background-repeat: repeat-y;
}
</style>
</head>
<body>

    <div class="divarea">上下で分けるパターン</div>
    <div class="divarea2">左右で分けるパターン</div>

</body>
</html>

 

その他 

緑の背景色をbackground-colorで指定して、その上にbackground-imageで敷き詰めるみたい。画像に関してはWindowsについているペイントで簡単に作成できる。

 - CSS

  関連記事

セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法

セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...

HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)

HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...

画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法

Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...

jQuery無しで要素にアニメーション効果を設定する方法(animate.css)

あるサイトをWappalyzerで調査していた際に「animate.css」とい ...

CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法

可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_st ...