勉強したことのメモ

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

  関連記事

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

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

CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

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

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

「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...

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

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