勉強したことのメモ

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

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

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

2015/03/12 2024/01/13 CSS

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

目次

1 サンプル
2 ソース
3 その他

サンプル

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についているペイントで簡単に作成できる。

関連記事

: JavaScriptの「Flatpickr」ライブラリで時分のみ表示する方法

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリでカ ...

: PHPにて「php-ulid」ライブラリを用いてULIDを生成する方法

先日MySQLにてUUIDを発行するメモを書いたがUUID v1だと生成時間によ ...

: Leafletでマーカーをグループ化し、チェックボックスの状態により表示非表示を切り替える方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

: PhpSpreadsheetでフォーマット用のエクセルを読み込み、指定したセルにデータを書き込んだ上で別名で保存する方法

PHPで納品書等のフォーマット用のExcelを読み込み、指定したセルにデータを書 ...

: PLESK利用時にMySQLでrootのパスワードが分からない場合の対応方法

pleskで管理しているサーバがあり、mysqlのrootのパスワードが分からな ...