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

HOME > HTMLの小技 > 背景の画像位置を指定する

<head>ここにコピー</head>


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

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

使いたい画像のURLを記入して下さい。

左端に並べる

<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>


[HOME]