Coder's Note

background-sizeとグラデーションで色々な模様を作る

CSS3で使えるようになったbackground-sizeというプロパティとグラデーションを使って背景にいろいろな模様を作ってみました。Firefoxだと完璧に動くので、ぜひFirefoxで確認してみてください。

background-size

backgorund-imageで指定した画像のサイズを指定するプロパティです。

対応ブラウザ

  • Firefox
  • Safari
  • Chrome
  • Opera

使い方

background-size: width height;

チェック模様

色々なサイトでも公開されていますが、CSS3のgradientでタータンチェックがやストライプなどの模様作れます。

デモ

試しに伊勢丹の紙袋のチェックを作ってみます。複数の背景画像を指定するのですが、Safariだと2個目以降のリピートが効きませんでした。（右にある画像はFirefoxのキャプチャです。）

コードがとても長いです…

background-size: 100px 100px;
-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
-o-background-size: 100px 100px;
background-repeat: repeat, repeat;
background-position: 10px 10px, 0 0;
background-color: #2F3430;
background-image:
    -webkit-gradient(
        linear,
        left top, left bottom,
        from(rgba(209,40,45,0.6)),
        color-stop(0.2,rgba(209,40,45,0.6)),
        color-stop(0.2,rgba(0,0,0,0)),
        color-stop(0.3, rgba(0,0,0,0)),
        color-stop(0.3, rgba(238,203,111,0.6)),
        color-stop(0.4, rgba(238,203,111,0.6)),
        color-stop(0.4, rgba(0,0,0,0)),
        color-stop(0.45, rgba(0,0,0,0)),
        color-stop(0.45, rgba(238,203,111,0.6)),
        color-stop(0.55, rgba(238,203,111,0.6)),
        color-stop(0.55, rgba(0,0,0,0)),
        to(rgba(0,0,0,0))
    ),
    -webkit-gradient(
        linear,
        left top, right top,
        from(rgba(209,40,45,0.6)),
        color-stop(0.2,rgba(209,40,45,0.6)),
        color-stop(0.2,rgba(0,0,0,0)),
        color-stop(0.3, rgba(0,0,0,0)),
        color-stop(0.3, rgba(238,203,111,0.6)),
        color-stop(0.4, rgba(238,203,111,0.6)),
        color-stop(0.4, rgba(0,0,0,0)),
        color-stop(0.45, rgba(0,0,0,0)),
        color-stop(0.45, rgba(238,203,111,0.6)),
        color-stop(0.55, rgba(238,203,111,0.6)),
        color-stop(0.55, rgba(0,0,0,0)),
        to(rgba(0,0,0,0))
    );
background-image:
    -moz-linear-gradient(
        left,
        rgba(209,40,45,0.6) 0,
        rgba(209,40,45,0.6) 20%,
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,0) 30%,
        rgba(238,203,111,0.6) 30%,
        rgba(238,203,111,0.6) 40%,
        rgba(0,0,0,0) 40%,
        rgba(0,0,0,0) 45%,
        rgba(238,203,111,0.6) 45%,
        rgba(238,203,111,0.6) 55%,
        rgba(0,0,0,0) 55%,
        rgba(0,0,0,0) 100%
    ),
    -moz-linear-gradient(
        top,
        rgba(209,40,45,0.6) 0,
        rgba(209,40,45,0.6) 20%,
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,0) 30%,
        rgba(238,203,111,0.6) 30%,
        rgba(238,203,111,0.6) 40%,
        rgba(0,0,0,0) 40%,
        rgba(0,0,0,0) 45%,
        rgba(238,203,111,0.6) 45%,
        rgba(238,203,111,0.6) 55%,
        rgba(0,0,0,0) 55%,
        rgba(0,0,0,0) 100%
    );

斜めのストライプ

デモ

background-size: 20px 20px;
-webkit-background-size: 20px 20px;
-moz-background-size: 20px 20px;
-o-background-size: 20px 20px;
background-image: -webkit-gradient(
    linear, left top, right bottom,
    color-stop(0, #FFF),
    color-stop(0.25, #FFF),
    color-stop(0.25, #2B3C45),
    color-stop(0.50, #2B3C45),
    color-stop(0.50, #FFF),
    color-stop(0.75, #FFF),
    color-stop(0.75, #2B3C45),
    color-stop(1, #2B3C45)
);
background-image: -moz-linear-gradient(
	left top,
	#FFF 0,
	#FFF 25%,
	#2B3C45 25%,
	#2B3C45 50%,
	#FFF 50%,
	#FFF 75%,
	#2B3C45 75%,
	#2B3C45 100%
);

水玉

Firefoxでしかうまくいきませんでしたが一応のっけておきます…

デモ

background-size: 50px 50px;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-o-background-size: 50px 50px;
background-color: #FFF;
background-repeat: repeat;
background-image: -moz-radial-gradient(
    50% 50%,
    #BE3C14 0,
    #BE3C14 50%,
    #FFF 50%,
    #FFF 100%
);