コンテンツの大きさはそのままで、ブラウザに合わせて自動伸縮の背景

質問

過去の質問を検索したのですが、すっきり解決するものが見つかりませ
んでした。
なんと質問したら良いのかも分からないため、伝わりにくかったら申し訳ありません。

http://www.mckinsey.co.jp/
上記のサイトのように、ブラウザのサイズを変更すると背景（？）も合わせて伸縮するのですが、
コンテンツの大きさは変わらないという方法を教えてください。

よろしくお願いいたします。

回答No.4

tenderfeel · ベストアンサー

>「縦方向に繰り返す」というのは、こちらのサイトを参考に、
>メインエリアのサイドをグレーのグラデーションで作ったことがあります。
happylifeさんのソースは綺麗でいいですね。和みます。

>今回も同じ考え方で良いということですか？
そうです。yをxにするだけです。

>その場合縦だったものを横にし、グラデーションのところを
>希望の色で作成すれば良いということでしょうか？
>（またまた説明がヘタで申し訳ありません…）
その通りです。

>今回のサンプルのサイトは左上に会社ロゴがあり、そちらは必ず左端に固定されていますが

background-positionというのは、背景の表示開始位置を指定するものなので、
前に私が挙げたソースで言うと
div.sample {
background-image: url(image/bg.gif);
background-repeat: repeat-x;
background-position: left top;
height:200px;
}
class="sample"というDIVタグでx方向にリピート表示する背景画像bg.gifの
表示開始位置をx=left y=topにする、ということです。
leftやright、topやbottomと書いた場合は0pxと同等の意味になります。

会社ロゴが中に入るのであれば、ロゴはまた別の要素としてCSSで位置を指定しなければなりません。
参考に挙げられたテンプレートが参考になるのでは。

お礼

ご回答ありがとうございます。
先ほど試したところうまくできました！
ロゴを入れる場合はまた別の設定だったのですね。
背景画像に入れるとロゴまで繰り返してしまいますものね（＾_＾;）
こちらもhappylifeさんのサイトで研究してみます。

本当にどうもありがとうございました。

回答No.3

tenderfeel

うっかり間違えてました。

※訂正
用意する背景は縦ｘ横の最低サイズが、
横方向リピートなら任意×1px、
縦方向リピートなら1px×任意
あれば表示されます。

お礼

ご回答＆訂正ありがとうございます。

「縦方向に繰り返す」というのは、
http://css-happylife.com/template/02/
こちらのサイトを参考に、メインエリアのサイドを
グレーのグラデーションで作ったことがあります。
今回も同じ考え方で良いということですか？

その場合縦だったものを横にし、グラデーションのところを
希望の色で作成すれば良いということでしょうか？
（またまた説明がヘタで申し訳ありません…）

今回のサンプルのサイトは左上に会社ロゴがあり、そちらは必ず左端に固定されていますが、
その指定は

background-position: left top;

の部分が該当するのですか？

何度も申し訳ありませんがよろしくお願いします。

回答No.2

tenderfeel

背景をCSSでリピート。
このサイトの場合はx軸方向にリピートさせています。

要素にCSSで背景をつけるとき
background-repeatプロパティでrepeat-xとすると、横方向にだけ繰り返し表示することが出来ます。
HTMLタグで背景を指定した場合だと方向の指定は出来ません。

用意する背景は縦ｘ横の最低サイズが、
横方向リピートなら1px×任意、
縦方向リピートなら任意ｘ1px
あれば表示されます。

一番親となる要素にその方法で背景をつけて、中の要素をmargin:0 auto;とかで中央位置に置くと
参考サイトのような感じになります。

具体的には次のようになります。
適当な画像で試してみてください。

div.sample {
background-image: url(image/bg.gif);
background-repeat: repeat-x;
background-position: left top;
height:200px;
}
.sample p {
width:400px;
border:solid 1px #ccc;
}
<div class="sample">
<p>サンプル</p>
</div>
※positionは背景の開始位置です。

プロパティはまとめて書くことも出来ます。
background:url(image/bg.gif) repeat-x left top;

参考サイトのように窓いっぱいに表示する場合は、
ユニバーサルセレクタでブラウザのデフォルトCSSをクリアする必要があります。
* {
margin:0;
padding:0;
}

無料テンプレート探すと似たようなのが見つかると思いますよ。

回答No.1

clover125

はじめまして、

ご指定のサイト、CSSで作られているみたいです。
私今XHTML+CSS勉強中なのですが、綺麗なソースは書けないかも?ですが
同じように表示させるページは作れます。
質問者様は普段どんな感じでページ作られていますか?
CSS使ってご指定のサイトと同じように作るか
テーブルレイアウトで作るかによって方法が違ってくるような?

どのように作成したいか、教えて頂けると回答しやすいかも?です。

お礼

ご回答ありがとうございます。
まだまだ私もCSSが不十分で（テーブルも不安…）試行錯誤しています。
知識ないんだからCSSからやっちゃえーと言う感じで作っています(^_^;)