CSS09　背景画像と枠線 - masayan-webの日記

ねこだまのCSSリファレンス&デモの概要
このサイトでは、CSS3まで含めたリファレンス（解説）とブラウザのサポート状況、CSSリセット、バグ対応などをCSSに関連することをまとめて公開しています。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>背景画像と枠線</title>
<style type="text/css">
body {
margin: 0;
background-image: url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-advance/20120415/20120415210237.jpg");
background-repeat: repeat-y;
}
h1 {
color: #8D0B00;
font-family: sans-serif;
border-bottom: dashed 4px #999;
}
p {
color: #333;
font-weight: bold;
line-height: 1.6em;
}
h1,p{
padding:10px 20px;
margin-left: 70px;
}
</style>
</head>
<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</body>
</html>