【office f】トップ＞スタイルシート＞スタイルシート雛形＞背景関係

＞

スタイルシート

＞

背景用雛形

●背景色の指定　→　サンプルを見る　

↓[back_color.css]

body {
margin: 50px;
color: #ffffff;
background-color: #ffff99
}
h3 {
padding: 3px;
text-align: center;
color: #ffffff;
background-color: #ff6633
}
p {
padding: 3px;
text-align: center;
color: #ffffff;
background-color: #ff9999
}
div {
padding: 1em;
color: #000000;
background-color: #ffffff
}
table, input {
color: #000000;
font-size: 10pt;
background-color: #ffffcc
}
caption, select {
color: #000000;
background-color: #33ccff
}
textarea {
color: #666666;
background-color: #99ffcc
}

背景画像

●背景画像の指定　→　サンプルを見る

↓[back_image.css]

body {
margin: 50px;
color: #ffffff;
background-color: #ff3300;
background-image: url(image/bg7.gif)
}
h3 {
padding: 5px;
text-align: center;
color: #000000;
background-color: #000000;
background-image: url(image/bg1.gif)
}
p {
padding: 3px;
color: #000000;
background-color: #ffcc00;
background-image: url(image/bg2.gif)
}
div {
padding: 3px;
color: #000000;
background-color: #ffffff;
background-image: url(image/bg3.gif.jpg)
}
table, input {
color: #333333;
background-color: #ff3300;
background-image: url(image/bg4.gif)
}
caption, select {
color: #333333;
background-color: #cccccc;
background-image: url(image/bg5.gif)
}
textarea {
color: #333333;
background-color: #339933;
background-image: url(image/bg6.gif)
}

背景画像の位置

●背景画像の表示位置を指定

	中心　→　サンプルを見る
	[back_position1.css] body { color: #000000; background-color: #ffffff; background-image: url(logo.gif); background-repeat: no-repeat; background-position: center center }

	右下　→　サンプルを見る
	[back_position2.css] body { color: #000000; background-color: #ffffff; background-image: url(logo.gif); background-repeat: no-repeat; background-position: right bottom }

背景画像の固定

●背景画像の固定

	→　サンプルを見る
	[back_kotei.css] body { color: #000000; background-color: #ffffff; background-image: url(image/logo.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; text-align: center } p { line-height: 2em }