- 締切済み
2つ画像を背景にするスタイルシートってある？
1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか？下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか？ <STYLE TYPE="text/css"> <!-- BODY { background-image:素材のURL; background-position:0% 100%; background-repeat:no-repeat; background-attachment:fixed; } --> </STYLE>
- aki_nemoto
- お礼率11% (1/9)
- CSS
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- daicham_in_okym
- ベストアンサー率50% (3/6)
No.2の補足です。 画像の大きさが、高さＡピクセル、横幅Ｂピクセルの場合、 top : expression((document.body.clientHeight-Ａ)*Ｘ); left : expression((document.body.clientWidth-Ｂ)*Ｙ); で、Ｘ・Ｙはそれぞれ、ｘ座標・ｙ座標の全体座標に対する割合です。 だから、真ん中に画像を配置する場合は、Ｘ・Ｙともに０．５となります。 左下隅に配置する場合は、Ｘは０で、Ｙは１になります。
- daicham_in_okym
- ベストアンサー率50% (3/6)
普通の画像を背景っぽく使う方法ではどうでしょう。 スタイルの中のz-indexという要素で、画像を本文より奥に配置しています。 画像の置く場所の指定ですが、 document.body.clientHeightなどでウィンドウサイズを取得して 画像の高さ・幅（下の例では１３０）を引くことによって、相対座標を指定できます。 下の例はおそらくＩＥ５以降でしか使えません ＩＥ４ではもうちょっと方法が面倒くさくなるみたいです。 ネットスケープはわかりません。 ---------- <img src="http://www.okweb.ne.jp/images/okweb_logo32c_130w.gif" style="position:absolute;top:0;left:0;z-index:-1;"> <img src="http://www.okweb.ne.jp/images/okweb_logo32c_130w.gif" style="position:absolute;top:expression(document.body.clientHeight-130);left:expression(document.body.clientWidth-130);z-index:-1;"> 本文本文～本文本文はいらんかね～ ----------
- zoh
- ベストアンサー率34% (273/789)
「二つの画像を並べて背景にしたい」と言う事ですよね。 それならば、画像を加工するソフトを使った方が早いような気がします。フリーウェアでも沢山ありますので、探してみてください。 そのほかには、ページ全体をTableにして、セルに背景として入れるというのもありですが。 ------------- <HTML> <BODY> <TABLE border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD width="100%" height="50%" style="background-image : url(http://www.okweb.ne.jp/images/okweb_logo32c_130w.gif);background-repeat : no-repeat;" valign="top">こんな感じですか？</TD> </TR> <TR> <TD width="100%" height="50%" style="background-image : url(http://img.yahoo.co.jp/images/main7.gif);background-repeat : no-repeat;" valign="top">きっとこんな感じですよね？</TD> </TR> </TBODY> </TABLE> </BODY> </HTML> -------------
補足
すみません説明不足でした。 並べて画像を背景にするのではなく、2つの画像を置く場所を指定したいのです。例えば1つ目は右上で、2つ目は左下みたいに置くことは無理でしょうか？ 結構こまかく場所を設定したかったので、スタイルシートの場所指定のところ（50％ 80％みたいな感じ）で2つの画像を別々の所に指定することって可能なのでしょうか？
関連するQ&A
- スタイルシートについて
スタイルシートで背景を画像にするものがありますよね。 それでＨＰを作ったものの、その画像が見れる人と見れない人が出てきてしまって困っています。もちろんインターネットオプションのユーザー補助は確認しています。自分の記述が悪いかもしれないので書いておきます。 <STYLE TYPE="text/css"> <!-- BODY { background-image:url("c:/my documents/素材ファイル名"); background-position:50% 50%; background-repeat:no-repeat; background-attachment:fixed; } --> </STYLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- 写真素材の背景
写真素材の背景で、例えば右下に表示するためのタグがありますよね？ それって↓ <STYLE type="text/css"> <!-- BODY { background-image : url("素材URL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; background-color:背景色; } --> </STYLE> でいいんですか？？↑で何度かやってみたんですが、ちゃんと右下に表示されません。
- 締切済み
- その他（インターネット・Webサービス）
- スタイルシートからの？リンクの貼りかた
<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="">とかけばいいのでしょうか？ スタイルシート初心者で何も分からないので分かりやすく教えてください。
- ベストアンサー
- その他（インターネット・Webサービス）
- テーブルにスタイルシートを使う方法
こんにちは、テーブルタグのことで質問があります。 普通、背景画像でスタイルシートを使い右下などに固定するタグは <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>の間にいれますよね。 これをテーブルの中で使うにはどうすればいいでしょう？ テーブルの背景画像を右下や左下などに固定したいということなんですがそういうことはできますか？ よろしくお願いします；
- 締切済み
- HTML
- 背景を固定した時の表の背景
こんにちは。ＨＰを制作し始めたばかりの初心者です。 質問です。 背景をこんな感じて固定した時 <STYLE type="text/css"> <!-- BODY{ background-image : url(○○.jpg); background-repeat : no-repeat; background-attachment : fixed; background-position : 90% 50%; } --> 作ってる表の背景画像が無効になっちゃいます。 なんか間違ってるんでしょうか？？？ お答えを頂けると有り難いのですが。
- ベストアンサー
- HTML
- Webタグの背景について
今HPを作っていますが チェックで作った背景に一つの画像を右下に固定表示させたいのですができるでしょうか？ 背景固定はできるんですけど画像を右下にやるのができません。 <body background="imagfolder/02.jpg" bgproperties="fixed"> のタグはチェックの背景になっています。 固定で検索すると <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } --> </STYLE> とでてくるんですが・・・
- 締切済み
- その他([技術者向] コンピューター)
- ホームページビルダーＶ９での背景固定について
ホームページビルダーＶ９を使っています。 そこで、背景を固定したいのですが上手くいきません。 ソースに下のようなタグを入れても画像が表示されないんです。 どうしたら良いか教えてください。 <STYLE type="text/css"> <!-- BODY { background-color: #------; background-image : url("画像のURL"); background-attachment: fixed; background-position: 50% 50%; background-repeat: no-repeat; } --> </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の上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- Webの背景について
今HTML、CSSなど使ってHPを作っていますが チェックで作った背景に一つの画像を右下に固定表示させたいのですができるでしょうか？ 背景固定はできるんですけど画像を右下にやるのができません。 <body background="imagfolder/02.jpg" bgproperties="fixed"> のタグはチェックの背景になっています。 固定で検索すると <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } --> </STYLE> とでてくるんですがどうしてもチェックの上に加工した画像を右下に固定したいので教えてください。 メモ帳より作成しています。 今月中に仕上げたいのでよろしくお願いします
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシート…
たぶん、初歩的な問題なんですが…自力では調べてもわからなかったので… スタイルシートで、画像を固定し、尚且つ、 リンクの貼ってある文字の上にカーソルがくると文字色が変わるようにしたいのですが、 どのようにすればよいのでしょうか？ 一応、 <style type="text/css"> <!-- body { background-image : url("画像のURL"); background-attachment: fixed; background-position: 100% 0%; background-repeat: no-repeat ; } a{text-decoration:none;} a:link {color:#色;} a:active {color:#色;} a:visited {color:#色;} a:hover {color:#色;} --> </style> じゃないかな…？と思って、試してみたのですが、画像は固定できてるんですが、 リンクの文字色は変わりませんでした…。 アドバイスお願いします！
- ベストアンサー
- HTML
補足
ありがとうございます。できることはできたんですが、画像の位置を変えるには下記の記述の130をいじってみたらできたんですけど、規則性がわからなくて画像が思うような所に配置できないので、その辺の所教えて下さい。何度もすみません。 style="position:absolute;top:expression(document.body.clientHeight-130);left:expression(document.body.clientWidth-130);z-index:-1;">