背景の画像を左上に一つ固定する方法

Question

いつもお世話になっております。
web初心者です。環境はMac OS 9.2、Dreamweaver 4です。
タイトルの通り、背景の画像を左上に一つ固定する方法をどなたか教えてください。
●左上に背景画像として各ページごと違う画像を入れたい。（大きさは同じ）
●テーブルやセルで画像を入れることはNG（背景画像なので）
●リピートはしたくない。
下の方法をネットで得たのですが、
できればCSSを使わずに作成したいのですが。
また、下の方法であればURLは相対パスでもできるのでしょうか。
<style type="text/css">

よろしくお願いします。
</style>

hiro_izushi · Accepted Answer

>多分、私がやりたいことをするのにはその方法が有効のようです。一つのCSSで全ページ分設定ができてしまう、という解釈で良いのでしょうか？ページごとに、背景画像を変えたいのです。（サイズは同じですが。）例えばTOP、NEWS、PROFILEにそれぞれimage1、image2、image3を入れたい場合のCSSとそれぞれのページのhtmlはどうなるのでしょうか？教えていただけますか？よろしくお願いします。。。ちなみにページ数は７ページです。 ●ＣＳＳは、 body { 　background-color: #FFFFFF 　background-repeat:no-repeat; 　background-position: left top; 　background-attachment: fixed; } #top-image { 　background-image:url(../image/img001.gif); } #news-image { 　background-image:url(../image/img001.gif); } #profile-image { 　background-image:url(../image/img001.gif); } ●ＨＴＭＬは、それぞれのようになります。私も以前は、Dreamweaver4を使ってましたが、実際のブラウザ（IE等）と表示が微妙に異なる。HTMLやCSSの記述が自分が思っている通りにならない。テンプレートや、複数の人とネットワークを介してホームページを作成するなどの機能を利用しない。等の要因から、利用しなくなった経緯があります。今ではフリーのテキスト系のHTMLエディタを使用するようになりました。 HTMLやCSSがある程度理解できれば、他のホームページのソースも参考にできるようになるし、もっと応用を利かせることでCSSの利用価値は上がると思いますので、がんばってホームページを作成してください。(^_^)。また、分からなければ質問してください。

Wizard_Zero · Answer

Wizard_Zeroと申します。

スタイルシートを使うしかないと思います。
相対パスも可能です。この場合、HTMLファイルと同じ場所からの参照になります。

Wizard_Zero · Answer

#1 Wizard_Zeroです。

可能です。
簡単に言えば、HTMLのhrefやsrcの使い方と同じです。

xxx.jpg で同じフォルダ
image/xxx.jpg でimageフォルダ
../xxx.jpg でひとつ上のフォルダ
/xxx.jpg でルートフォルダ

hiro_izushi · Answer

例えば、ファイル（□）とフォルダ（■）下のような構成の場合、 ■ 　　□index.html 　　■css 　　　　□style.css 　　■image 　　　　□img001.gif index.htmlは、次のような記述になります。style.cssファイルは、index.htmlから見た相対パスになります。 style.cssは、次のような記述になります。img001.gifファイルは、style.cssから見た相対パスになります。 .aaa { background-color: #FFFFFF 　background-image:url(../image/img001.gif); background-repeat:no-repeat; background-position: left top; background-attachment: fixed; } この例、スタイルをclassで指定してますが、直接 body 要素にスタイルを指定しても良いです。その場合 body { background-color: #FFFFFF background-image:url(../image/img001.gif); background-repeat:no-repeat; background-position: left top; background-attachment: fixed; } となります。

Wizard_Zero · Answer

#1 #2 Wizard_Zeroです。スタイルシートの指定方法は３つあり、適用される優先順位が違います。優先順位が高い方から書きます。１．タグにSTYLE属性で記述　　２．内に　　３．外部ファイル(.css)で記述　　つまり、２の方法でBODYに「background : blue」を指定していても、１の方法で「background : white」にしていれば、背景色は白になります。利用方法の違いとしては... １の場合、ピンポイントでスタイル適用２の場合、ページ全体で共通のスタイルを適用３の場合、サイト全体でスタイルを共有可能といったところでしょうか。上手に使い分ければ、スタイルシートの指定がとても楽になりますよ。

hiro_izushi · Answer

CSSファイルは、html毎に作成するのではなく、1つ（とは言いませんが、少ない数）を、複数のhtmlで共有する使い方が賢い方法と思います。

そうすると、

body {
background-color: #ffffff;
margin: 0;
}
h1 {
font-family: "MS UI Gothic",Osaka,sans-serif;
font-size: 140%;
color: #222222;
}

のような基本スタイルは、複数のページ(html)でも共通になると考えられるので、タグに対して設定します。

一方、サブコンテンツ（テーマ）毎に背景を変えたいなど、ページ毎にわずかな変化を持たせたい場合は、これだとうまくできないので、idを使用します。

●ＣＳＳは、
#back-image_favrite {
background-image:url(../image/img001.gif);
}
#back-image_profile {
background-image:url(../image/img002.gif);
}

●ＨＴＭＬは、
<body id="back-image_favrite">

のようになります。
idは基本的に、1ページに1つしか設定できない（複数のidを1ページで、各1つだけ設定するのは可能！）ので、ページ中で何回か設定する要素にはclassを使います。

●ＣＳＳは、
.block_href {
width: 49%;
margin: 0;
padding: 2px;
float: left;
}

●ＨＴＭＬは、
<div class="block_href">
<h1>目次</h1>
<div />
<div class="block_href">
<h1>お知らせ</h1>
<div />

こんな感じです。更に、

.block_href h1 {
font-size: 80%;
}

のように、クラス属性の中の特定のタグにだけ、スタイルを設定することもできます。

長い内容になりましたが、説明はかなり端折りましたから、分かりにくいところも多分にあると思います。また、分からないところがあれば、ご質問ください(^_^)

お知らせ

こんな感じです。更に、 .block_href h1 { font-size: 80%; } のように、クラス属性の中の特定のタグにだけ、スタイルを設定することもできます。長い内容になりましたが、説明はかなり端折りましたから、分かりにくいところも多分にあると思います。また、分からないところがあれば、ご質問ください(^_^)

背景の画像を左上に一つ固定する方法

Wizard_Zeroと申します。

この回答への補足

#1 Wizard_Zeroです。

例えば、ファイル（□）とフォルダ（■）下のような構成の場合、

この回答への補足

#1 #2 Wizard_Zeroです。

CSSファイルは、html毎に作成するのではなく、1つ（とは言いませんが、少ない数）を、複数のhtmlで共有する使い方が賢い方法と思います。

この回答への補足

>多分、私がやりたいことをするのにはその方法が有効のようです。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング