勉強したことのメモ

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

  関連記事

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...

CSSフレームワークであるTailwind CSSの特徴とBootstrapとの違いについて

あるサイトをWappalyzerで調査していた際にUIフレームワークがTailw ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

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

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