勉強したことのメモ

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フレームワークであるTailwind CSSの特徴とBootstrapとの違いについて

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

CSSで1つの要素に複数classを設定して画像を入れ替える方法

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...

特定のID / Classを持つタグの親要素に対してCSSを割り当てる方法

特定のID / Classを持つタグの親要素に対してCSSを割り当てたい。また、 ...

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

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

jQueryのCSS変更

jQueryでCSSを触る際、 $("#aaa").css('height',' ...