【HTML】【CSS】コピペで使えるサンプル集－背景編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここではホームページやブログのデザインに大きく営業する背景や模様について
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、
画像は使用しません。


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－引用部分編


────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

背景サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

背景・模様①

<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #00aaee; background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様①</span> </div>

背景・模様②

<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #ff9900; background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様②</span> </div>

背景・模様③

<div style="background-color: #840b2a; background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様③</span> </div>

背景・模様④

<div style="background-color: #6d695c; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); background-size: 70px 120px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様④</span> </div>

背景・模様⑤

<div style="background-color: black; background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="color: white; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑤</span> </div>

背景・模様⑥

<div style="background-color: #ddeeff; background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%), radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%); background-position: 0 0, 40px 40px; background-size: 80px 80px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑥</span> </div>

背景・模様⑦

<div style="background-color: silver; background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px); background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; background-size: 58px 58px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑦</span> </div>

背景・模様⑧

<div style="background-color: silver; background-image: radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent), radial-gradient(circle at 0 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent); background-size: 100px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑧</span> </div>

背景・模様⑨

<div style="background-color: #555566; background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; background-size: 80px 140px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑨</span> </div>

背景・模様⑩

<div style="background-color: #000011; background-image: radial-gradient(white 15%, transparent 16%), radial-gradient(white 15%, transparent 16%); background-position: 0 0, 30px 30px; background-size: 60px 60px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="color: white; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑩</span> </div>

背景・模様⑪

<div style="background-color: hsl(2, 57%, 40%); background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px); box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="color: black; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑪</span> </div>

背景・模様⑫

<div style="background-color: white; background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em); background-size: 100% 1.2em; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="color: black; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑫</span> </div>

背景・模様⑬

<div style="background-color: white; background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="color: black; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑬</span> </div>

❏参考記事、ブログ

こちらの記事やブログのサイト様を参考にさせていただきましたm(_ _)m

・[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート

・CSS3 Patterns Gallery



こちらも合わせてご確認ください☆

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編

・【HTML】【CSS】コピペで使えるサンプル集－引用部分編