背景画像の位置を指定するには

HOME > Web豆知識 > 背景画像の位置を指定するには

■ スタイルシートを使う

このページのように左端に背景の画像を並べます。
左端以外のサンプルはないです。

←このページはこの画像を使用しています。

使いたい画像のURLを記入して下さい。ソースは<head>から</head>の間に記述

■左端に並べる

<style type="text/css">
<!--
body {background-image:url(画像のURLを記入); background-repeat:repeat-y; background-attachment:fixed}
-->
</style>

■右端に並べる

<style type="text/css">
<!--
body {background-image:url(画像のURLを記入); background-repeat:repeat-y; background-position: right; background-attachment:fixed}
-->
</style>

■上に並べる

<style type="text/css">
<!--
body {background-image:url(画像のURLを記入); background-repeat:repeat-x; background-attachment:fixed}
-->
</style>

■下に並べる

<style type="text/css">
<!--
body {background-image:url(画像のURLを記入); background-repeat:repeat-x; background-position: bottom; background-attachment:fixed}
-->
</style>

■中央に1つ固定

<style type="text/css">
<!--
body{ background: url(画像のURLを記入) no-repeat fixed center center }
-->
</style>

■右下に1つ固定

<style type="text/css">
<!--
body{ background: url(画像のURLを記入) no-repeat fixed right bottom }
-->
</style>

■左上に1つ固定

<style type="text/css">
<!--
body{ background: url(画像のURLを記入) no-repeat fixed } 　
-->
</style>

■好きな位置に固定

<style type="text/css">
<!--
body{ background: url(画像のURLを記入) no-repeat fixed 10px 200px} 　
-->
</style>
■ HTMLで背景を固定

上記にスタイルシートで背景を固定する以外にHTMLでもある程度可能です。

fixedと書くことにより背景を固定します

<body background="背景のURLを記入" bgproperties="fixed">

［HOME］

Click Here! Click Here!