背景画像の位置

このページの背景の設定として、

<style type="text/css">
body {background-image: url("images/daigaku.gif");
background-repeat: no-repeat;
background-position: top center; }
</style>

としています。黒太文字の箇所が今回の位置に関する部分です。

下線部を変更すると、表示場所を変えることができます。

表示位置

なお、「デザイン」画面で編集中は画像が予想外の箇所に表示されるかもしれません。「プレビュー」で表示状態を確認してください。

くり返しの時にも使えます

上の例で「background-repeat: no-repeat;」があるのでわかってもらいたいが。

上の例において、「no-repeat」を「repeat-y」に、「top center」を「right」にそれぞれ変更すると、背景画像を右端にタテに並べることができる。

★上端にヨコに並べたいときは「repeat-x」＆「top」、下端にヨコに並べたいときには「repeat-x」＆「bottom」にする。

背景画像の位置を座標で決める

<style type="text/css">
body {background-image: url("images/daigaku.gif");
background-repeat: no-repeat;
background-position: 30% 50%; }
</style>

表示結果は示しませんが、上記（下線）