初めまして。m(__)m
よくネットサーフィンしているとブラウザ全体に1枚の写真を
使っているところがあります。
ＣＳＳを使って1枚の写真をならべてるのでなく、ＨＰのバックグラウンドが1枚の写真を大きくはりつけてあるのです。
これはどうやってするのでしょうか？教えて下さい。
やはりCSSでは？(background)
さっぱり★さんの補足になりますが、通常<BODY>の後にさまざまなタグをいれていきますが、この<BODY>の代わりに、<BODY background="ファイル名">とすると、一面にその画像が使われるようになります。ただし、画像が小さい場合は、その画像が画面いっぱいに敷き詰められる形で表示されるので、ある程度大きな画像を用意したほうがいいかもしれませんね。
BODYタグのbackground属性は背景画像の繰り返し（をしない）指定はできませんが、
CSSのbackgroundプロパティなら指定できます。
http://www.parkcity.ne.jp/~chaichan/src/cssback.htm
http://www.makoto3.net/
TIPS & TRICS Vol.3 No15
これ？
あの、説明不足でごめんなさい。
CSSでの使い方は知っています。
一枚の写真をブラウザのサイズで表示させたいのです。
HIさん。
アドレスありがとうございます。
PHOT CHATにある背景です。
ブラウザのサイズをかえても同じように表示されます。
これは、どうやってするのでしょうか？
>>6
<img SRC="carot.jpg" STYLE="position:absolute;top:0;left:0; z-index:-1;width:expression(document.body.clientWidth); height:expression(document.body.clientHeight);">
とソースには有ります。(N6では確認できませんが。)
clientWidth/Height = クライアント(見ている側、ブラウザー)の横幅/縦幅に合わせる
という感じではないでしょうか?
expression
が重要かもしれません
PHOT CHATは知りませんが、これ？
body{margin:0px}
div{position:absolute;top:0px;left:0px;
width:100%;height:100%;z-index:-1}
div img{width:100%;height:100%}
<html>
..
<body>
<div id="bg"><img></div>
<div id="body">..</div>
</body>
</html>
こんな装飾的な構造だろうか、多分。
しかし、装飾のための最初のdivは「内容の追加」という考え方 (スタイルシートでは今回は無理があるからスクリプト) で処理すべきであり、こんな恥ずかしい構造はまさかできはしない。あくまで分かりやすいように。
/*
ところで、更にえらそうに言うと、CSS2は「外堀から埋める」を徹底したほうがいいと思う。シートそのものが設計図であると同時に、シートのためのシートが頭に描けていなければ行き当たりばったりになると思う、ということ。頭に描いたことを後々反芻するときにシートが外堀から埋めて記述してあれば効率がいいし、仮に引継ぐ時があればかなり楽になるだろう。
ボックスモデルという言葉がある。上書きをしない間は、この場合、セレクタは構造を深さ優先探索して、html、body、div#bg、div#bg img、div#bodyの順にシートに現れるべきである。プロパティはdisplay、margin (、color)、border (、background)、paddingが最初にこの順で書かれていなければ頭に設計図が描けていないと言えなくもないように感じる。
*/
:root
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
/*
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: auto;
*/
}
body
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
/*
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: auto;
*/
}
div#bg
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: auto;
}
div#bg img
{
width: 100%;
height: 100%;
}
div#body
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: auto;
}
2箇所コメントアウトした部分がある。body直下2つのdivはpositionedだから放っておけばviewportまで突き抜けてくれる。ただ、widthやheightの%を単位とする値はその直接の親要素のそれに間違いなく対応させておいたほうが系統的には分かりやすいかもしれないということ。つまり今でも正しいウェブブラウザが存在しないようだからそれへの保険。
まあ冷静になって、この種 (実装の未熟なoverflow) のトリックは避けて通るほうが賢い、拡大された小汚い画像を晒してどうすんの、と思うがなあ。。。
/*
expressionに関連して、setExpressionとかそのへんのメソッドをmsdnで調べると、Excelのように同時進行的に合計値が変わっていくhtmlサンプルがあったと思う。つまりこのCSSプロパティは主にリサイズ時に強制的に画面サイズに合わせるのに使う。ただし、%指定しておけば、WinIEはこの処理を勝手にしてくれるから、ここではどうでもよいことだ。そういう化け物なWinIEの実装とは別に、勧告ではリサイズ時に内容が見えるようにスクロールの類は強制していてもすでに決まっている内容の再描画までは強制していない。実際、例えばtable要素の幅を%指定しても再描画されないウェブブラウザは存在する。
また、IEのexpressionといえどもスクロール時の再描画まではしない。だから仮にここでposition: fixed;としてそれをWinIEにexpressionで再現させようとしても徒労に終わる。
ついでに、expressionは使い勝手がよくない。なぜならCSSに書くので「;」なんかは書けない。従ってASCII値にエスケープするに限る。それを
expression(eval(String.fromCharCode(..)))
として戻す。IE5.5以上があれば、エスケープはコードをStringとして、
String.prototype.charCodes=function(){
var
shift,
codes=this.split('');
try{
while(codes.push((shift=codes.shift()).charCodeAt()));
}
catch(typeError){
codes.unshift(shift);
}
return codes;
}
を使ってWSHなどで処理すればいい、手前味噌。
*/
みな様、教えてくださってありがとうございました。
もっと勉強します。