CSSで背景〜


0   名前: yakkun9号 : 2006/09/15(金) 01:10  [URL]  ID:zLnoCaAF
いつもこのサイトを使わせていただいてもらっている者です。
そして初めての質問です(´・x・)

CSSで背景を指定する方法は分かったのですが、
背景にする画像をページいっぱいまで拡大したいのですが探してもわかりませんでした(。。;
分かりづらくてすみません;

気長に助言お待ちしております。

1   名前: カヅサツ ◆ThCi95HEzw : 2006/09/15(金) 01:10  [URL]  ID:f0UXxXRM
> 背景にする画像をページいっぱいまで拡大したい

残念ですができないです

2   名前: yakkun9号 : 2006/09/15(金) 01:10  ID:zLnoCaAF
ありがとうございます。
この方法は諦めます。

3   名前: sevi- : 2006/09/15(金) 01:10  ID:9J5RKOHs
横槍失礼.
CSSとスクリプトを組み合わせてもいいなら以下の関数を文書読み込み完了後等に呼び出せば一応似たような状態には出来ると思われる.
動的に変な文書構造にしてしまう事になるので,勧められないが.

//引数に与えたURLをページ全体表示背景にする
function setFullBackgroundImage(url)
{
	if(document.body == null || document.body.style == null)
		return;
	var img = new Image();
	img.src = url;
	img.style.width = "100%";
	img.style.height = "100%";
	img.style.position = "fixed";
	img.style.borderStyle = "none";
	img.style.zIndex = 0;
	img.style.left = "0px";
	img.style.top = "0px";
	var layer = document.createElement("div");
	layer.style.width = "100%";
	layer.style.height = "100%";
	layer.style.position = "relative";
	layer.style.zIndex = 1;
	layer.style.left = "0px";
	layer.style.top = "0px";
	while(document.body.hasChildNodes())
		layer.appendChild(document.body.firstChild);
	document.body.appendChild(layer);
	document.body.appendChild(img);
}

//test.jpgを設定するテスト
window.onload = function(){setFullBackgroundImage("test.jpg");};

4   名前: yakkun9号 : 2006/09/15(金) 01:10  ID:zLnoCaAF
ありがとうございます♪>savi-さん
早速試してみたいのですが。。。
やりかたが分かりませn(ry

頑張って試してみます。
ありがとうございました。


5   名前: カヅサツ ◆ThCi95HEzw : 2006/09/15(金) 01:10  [URL]  ID:f0UXxXRM
>>3 は スタイルシートというよりは javaScript の問題(JavaScriptでスタイルシートの指定を変化させている)なので、「どうしても自力で解決できないのであれば」JavaScript質問板で質問されるとよろしいと思います。

6   名前: 匿名 : 2006/09/15(金) 01:10  ID:i4s77xzC
重箱の隅かつ板違いだけど、
(new Image)と、HTML DOMのcreateElement('IMG')は等価ではない。
前者が返すのはJavaScript 1.xのImageであり
後者が返すのはHTML DOMのHTMLImageElement。
styleアトリビュートが必要で、かつDOMノードとして挿入するなら後者を使わねばならない。

まぁ大抵のDOM実装で、互いを単なるショートカットと見なすのだが
Safariは意外にきっちりしていて、ImageをDOMノードとしては扱えないので注意。

7   名前: 匿名 : 2006/09/15(金) 01:10  ID:i4s77xzC
あーつまり何が言いたかったかというと

>>3の
> var img = new Image();
の部分は
var img = document.createElement("IMG");
にした方が良いな、という提案でした。

理屈馬鹿でスマソ

8   名前: 無理やり : 2006/09/15(金) 01:10  ID:/MqiT7fH
ハイブリッドならできそう。
つまり、テーブルとcssを組み合わせればできるでしょう。

既存を捜すではなく、自分で考える。組み合わせる。
安易に諦めない。

以上 ヒントでした。コピペばかりじゃ、上達しないよ。
気長に考えてみてね。必ずできるから。

9   名前: yakkun9号 : 2006/09/15(金) 01:10  ID:VevXi2Kh
皆さんありがとうございます♪
気長に考えて方法を見つけ出します。

10   名前: じゃあ、もっとヒント : 2006/09/15(金) 01:10  ID:E.yS0/2A
テーブルでバックグランドを使わずにイメージとして、画面いっぱいいっぱいに表示させる。
できる?画面に合わせてちゃんと、縮小拡大するように組むんだよ。htmlの中身がそれだけのものをまず用意できる?

頭をやわらかくして考える。背景だからバックグラウンドしか思い浮かばない人にはできない。
質問しても出来ないって答える人いるけど、その人にはできないってこと。諦めない限り、思いつくことには実現の可能性があるよ。

それが、できたら、それをバックグラウンドのように見せる方法を考えてみてね。

11   名前: yakkun9号 : 2006/09/15(金) 01:10  ID:VevXi2Kh
分かりました_/\○_   ε=\_○ノ イヤッホーゥ!
次は頑張ってバックグランド目指します♪

12   名前: はやいねぇ : 2006/09/15(金) 01:10  [URL]  ID:E.yS0/2A
次のヒント
そのテーブルに名前をつけてね。divしなくていいから。Tableもブロックだから。
予定していた中身も1つのブロックにして名前つけてね。
この2つを1つのファイルに入れます。

ここからが、css
ブロック要素を層にできるとか、位置調整できるとか知ってる?

もう一息だよ。がんばれ〜

13   名前: どっちか1つ : 2006/09/15(金) 01:10  [URL]  ID:E.yS0/2A
層か、位置調整か知ってるほうを当てはめてみて。
私が、質問みてぱっと思いついたのがその2つ。
両方、知らないなら、位置調整をお薦めする。cssをこれからも利用するなら、覚えておけば層より小回りよく使えるよ。

yakkun9号さんが第3のやり方を思いついたのならそれを提案してみて。

14   名前: yakkun9号 : 2006/09/15(金) 01:10  ID:VevXi2Kh
第三の方法を思いついた。。。というより見つけました♪
とほほさんのところで、
<img src="images/back.gif" width="100%" height="100%"
     style="position:absolute; top:0px; left:0px; z-index:1;">
<div style="position:absolute; top:10px; left:10px; z-index:2">
</div>

というものがありまして、簡単にできちゃいました。
皆さんありがとうございました。

15   名前: 匿名 : 2006/09/15(金) 01:10  ID:OsnzKO.l
そう、もったいないことしたね。
理解できなかったんだ。
そう、それで意味も考えず使うんだ。
おしいことしたねぇ。

16   名前: 匿名 : 2006/09/15(金) 01:10  ID:i4s77xzC
>>14
それをいちいちHTMLに書かずにJavaScriptで自動化したのが>>3だったんだがな。
原則img要素はbody要素直下には置けないんで、もう一工夫は必要だぞ。

17   名前: 匿名 : 2006/09/15(金) 01:10  ID:i4s77xzC
>>14
もう一つ大事なことだけど、それスタイルシートをオフにするとすさまじいことになる。
俺が思うに、だから>>3はHTMLに直接書くことをせずに、スクリプト生成してたんだよ。
# スクリプトがonで、スタイルがoffという環境は、あんまり考えられないから。

とほほ氏のところにあるのはあくまで生の材料なんで、ちゃんと料理しないと危ないよ。

18   名前: yakkun9号 : 2006/09/15(金) 01:10  ID:VevXi2Kh
分かりました(。。
もう一工夫してみます。

19   名前: 匿名 : 2006/09/15(金) 01:10  ID:i4s77xzC
ごめんな、水差しちゃって。

>>3を使うなら、<head>..</head>内に <script type="text/javascript">..</script> を書いて、その中にスクリプトを埋め込めばOK。
最後のtest.jpgの部分だけ書き換えれば良い。

テーブルは・・・原理的に>>14と一緒だと思うので、テーブルにする必要ないんじゃないかな。
俺勘違いしてる?

20   名前: タイトル君 : 2006/09/15(金) 01:10  ID:E.yS0/2A
>>19

最近、スペースの問題でブラウザで同じ表示ができないという質問が多発してる。1.も仲間入りするんじゃないかなと思って、テーブルを薦めた。初心者以前にいきなり、4989教えるのも嫌だし。

全画面って言っても元画像の問題で挫折が予想された。匿名 ID:i4s77xzC さんはサイト持ってる?アクセス解析入れてる?急速に画面サイズに3分化が進んでる気がする。携帯用に作ったサイトでもないのに、じゃんじゃん来るし、大画面は来るし。これに同じ1枚全体画像ですか?無理ない?だーれも来ない自己満足ページなら問題ないけど。

他にも例えば画像に人物が入ってたら、画面のとり方で百貫デブにも棒人間にもなる、建物の窓が鉄格子になったら楽しいと言えば楽しいけど。そのうち、縦だけ100%にして横成り行きとか、90%にしてどこそこに置きたいとかいいだすんだろうなと思った。位置調節で悩むかなと思って。そんで、テーブル薦めた。

原理的には>>14と、レイヤー使わないやり方の2つ。>>14の場合は背景以外には番号振らなくていいように誘導しようかなと思ってたんだけど。

ここの入力欄変わったね。コテハンじゃないし、URLもよそ様だし、長くなりそうでIDは固定にするために、わざわざ串通してるし、なんか今回は全面的にいけない子としている気分。


一覧へ戻る