スタイルシートに複数の画像を入力する方法

このQ&Aのポイント
  • スタイルシートに複数の画像を入力する方法を教えてください
  • 超初心者のため、スタイルシートに複数の画像を入力する方法がわかりません
  • <style>タグを使用してページに画像を表示させる方法についてお教えください
回答を見る
  • ベストアンサー

スタイルシートに複数の画像を入力する方法を教えてください

超初心者のため、以下のような初歩的な質問をすることをお許しください。 初心者向けのHP作成補助サイトを見ながら、Windowsのメモ帳で<html><head></head><body></body></html>などを入力しながらHP を作成しているのですが、どうしてもスタイルシートに複数の画像を 入力させる方法がわかりません。 現在、<head>と</head>の間に <style type="text/css"> body { background-color: #ffffff ; background-image:url("画像1.jpg"); background-repeat:no-repeat; background-position:100% 100%; background-attachment:fixed; } </style> という形で、ページの【右下】に200×400程度の画像を表示させているのですが、 このほかに同じ200×400サイズの画像を【左上】に表示させるには どのようにすればよいのでしょうか? <div>などのタグを使うことも考えたのですが、そうするとページを スクロールすると、左上の画像が上に流れていってしまう上に、中央に表示させている文字を隠してしまうので困っています。 私の知識不足なのでしょうが…。 左上の画像も右下の画像と同じようにページに固定して表示させる 方法を教えてください。 必要な情報かはわかりませんが、画像やhtmlはFFFTPでサーバーにアップロードして、Internet Explorerで表示しています。

質問者が選んだベストアンサー

  • ベストアンサー
  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

いや divを使う事になるよ。 通常は全体として body に指定して終わりだけど それと同じ様に 全体を囲むdiv を用意して同じ事をするだけ。 但し、位置を固定する場合はfixedでやらないとならず、それに対応していないブラウザ(具体的にはIE6)でちゃんと固定できないからそこら辺は我慢するしかないね。

marimo3269
質問者

お礼

回答ありがとうございます。 全体を囲むdivの作成方法がよくわかってないので、そこはいろいろ 検索しつつまた勉強して出直してきます。 親切にどうもありがとうございました。初心者なりに頑張ってみます。

関連するQ&A

  • テーブルにスタイルシートを使う方法

    こんにちは、テーブルタグのことで質問があります。 普通、背景画像でスタイルシートを使い右下などに固定するタグは <STYLE TYPE="text/css"> <!-- BODY { background-image : url("画像の名前"); background-repeat : no-repeat; background-attachment : fixed; background-position : left bottom; background-color:#FFFFFF; } --> </STYLE> となると思いますが、これは通常<head></head>の間にいれますよね。 これをテーブルの中で使うにはどうすればいいでしょう? テーブルの背景画像を右下や左下などに固定したいということなんですがそういうことはできますか? よろしくお願いします;

  • 2つ画像を背景にするスタイルシートってある?

    1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか?下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか? <STYLE TYPE="text/css"> <!--    BODY {       background-image:素材のURL;       background-position:0% 100%;       background-repeat:no-repeat;       background-attachment:fixed;     } --> </STYLE>

    • 締切済み
    • CSS
  • htmlやスタイルシートに詳しい方教えてください

    初めてのHP作りがんばっています 早速行き詰まりました(´~`) 800×600くらいのサイズの1枚のオリジナルイラストの画像があるのですがそれを背景としたいです 下記のように記述いたしました <html> <head> <title>tamaringo world</title> <style type="text/css"> body { background-image: url(img/haikei.jpg); background-repeat: no-repeat } </style> </head> <body> </body> </html> 背景として画像は表示されますが左上に表示されてしまい右側と下に大幅な余白ができます 画面いっぱいに背景とするにはどうしたらいいでしょうか 横スクロールにはしたくないです できれば縦スクロールもなしで1枚の画像がポンと出るようにしたいです 初心者で質問の意図が分かりにくいかと思いますがアドバイスいただけると本当にうれしいです よろしくお願いします

    • ベストアンサー
    • HTML
  • スタイルシートからの?リンクの貼りかた

    <style type="text/css"> <!-- body {background-image:url(sora.jpg); background-repeat:no-repeat; background-position: right bottom; background-attachment:fixed;} --> </style> ↑このようなスタイルシートがあります。 sora.jpgという画像を固定して表示しています。 この空の画像から他のページにリンクを貼るにはどのような タグを書けばいいのでしょうか? スタイルシートの中に<a href="">とかけばいいのでしょうか? スタイルシート初心者で何も分からないので分かりやすく教えてください。

  • スタイルシートについて

    スタイルシートで背景を画像にするものがありますよね。 それでHPを作ったものの、その画像が見れる人と見れない人が出てきてしまって困っています。もちろんインターネットオプションのユーザー補助は確認しています。自分の記述が悪いかもしれないので書いておきます。 <STYLE TYPE="text/css"> <!--    BODY {       background-image:url("c:/my documents/素材ファイル名");       background-position:50% 50%;       background-repeat:no-repeat;       background-attachment:fixed;     } --> </STYLE>

  • HTMLでの背景画像設定について

    はじめまして。 HP作成初心者なのですが、いろいろとネットで調べながら作成しています。 フレームを使っていて、メニュー画面側のほうに画像をふたつ使いたいと考えています。 それぞれ左上と左下とで固定する画像なのですが、それがどうしてもふたつ同時に表示できません。 <style type="text/css"> <!-- BODY {background-image : url("bg2.jpg");background-position: 100 0%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> <style type="text/css"> <!--BODY {background-image : url("bg.jpg");background-position: 0 100%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> という感じに記述しているのですが、こうすると、下にあるbg.jpgのみが反映されてしまって、bg2.jpgは反映されません。 また、bg2.jpgの上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。

  • <STYLE>シートでは指定できるんですけど・・

    styleシートで画像の位置って指定できますよね? 例えば、一番右下にぴったり画像をくっつけたい場合、 <STYLE type="text/css"> <!-- BODY { background-image:url(画像URL);    background-repeat:no-repeat;    background-position:right bottom;} --> </STYLE> で右下に画像が固定できますよね? でも、<body>タグでは指定できないのでしょうか。 教えて下さい。

  • スタイルシートを使ったボーダーレフト壁紙の作り方

     壁紙を、片側だけ、もしくは、両サイドにだけ、画像を敷き詰めた壁紙を作りたいのですが、素材屋さんのところで書かれてある例を貼りつけてみましたが、 画像がなにも出てきません。 <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- body{ background-attachment:fixed;} background-color:#000000; background-image:url(sbg001.jpg); background-repeat:no-repeat;} --> </STYLE> </HEAD> <BODY bgcolor="#000000" text="#f0f8ff" link="#a6caf0" vlink="#a6caf0">  :  :  こんな感じですが、 どこを、どう直せばいいですか?  具体的に教えてください。 よろしくお願いします。

  • HTMLでのサイト作りについて

    メモ帳でHTMLのサイトを作ろうとしてるんですが、 画像を上部に一列表示がどうやってするのかわかりません。 そのソース、または <style type="text/css"> <!-- body { background-image : url("画像URL"); background-repeat: repeat-x; background-attachment: fixed; } --> </style> を、<HEAD>~</HEAD>に とかいてあるんですが、 <html> <head> <title>私のページ</title> </head> <body> 初めてホームページを作ってみた。 <br> </body> </html> のどこにいれるんですか? 教えてください><

  • グラデーション背景と画像固定背景

    こんにちは。 ホームページ作成初心者の者なのですが、ページの背景をグラデーション背景の上に固定した画像背景を乗っけようと考えているのですが、グラデーション背景のタグを入れると画像背景のタグが無効になってしまいます。この二つを同時に有効にする事は不可能なのでしょうか。 ちなみにタグは <HEAD> <STYLE> <!--BODY { background-image : url(back2.gif) ; background-repeat : no-repeat ; background-position : 90% 90% ; background-attachment : fixed ;} --> </STYLE> <STYLE> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#68b4ff',endcolorstr='#ffffff',gradienttype='1') } --> </STYLE> (省略) </HEAD>