こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

背景について・・・

いつもお世話になっております。

今添付画像のようなサイトを付くろうと思っております。
http://snapkidz.biz/wp/

今回うまくいってない部分は、背景です。
firefoxでみると崩れなどはないのですが、ipadでみるとかなりheadとmainの部分に隙間がうまれてしまいます。
この背景のひき方は間違っているんでしょうか?

html/
[header]

<body>
<div id="page">
<div id="wrapper">
<div class="header">
<h1><a href="#"><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/logo_03.gif" width="171" height="76" alt="Art・・"></a></h1>
</div>
[フッダー部分にpageとwrapperの/divの記載はあります。]

[CSS]
html,body{margin:0;padding:0;}
#page{height:580px;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/theme_top_01.jpg);background-repeat:no-repeat;margin:0 auto;background-position:center;padding-top:10px;}
#wrapper{width:100%;margin:0 auto;}
.header{width:980px;height:100px;margin:0 auto;}
.header h1{margin:0;}

#main{height:1317px;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/body_02.jpg);background-repeat:no-repeat;margin:0 auto;background-position:center;position:relative;top:450px;}

こっちのほうが楽だよ!とか普通はこうだ!などありましたら勉強不足な自分に教えてください。

宜しくお願いします。

投稿日時 - 2011-12-23 00:08:45

QNo.7204449

すぐに回答ほしいです

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

センタリングできていないってこと?
背景の考え方と言う前に、ひとまずCSSのbackgroundの記述が間違ってますね。
たぶんこういうことじゃないかな。
書き方は色々あるけど、参考までに。
background:transparent url(path) center top no-repeat ;

ちなみにこれを質問者さんのようにばらばらで書くなら
baackground-image:url(path);
background-position:center top;
background-repeat:no-repeat;

投稿日時 - 2011-12-24 11:52:07

お礼

なるほど・・・記載の仕方がまず違ったのですね・・・勉強になります。

投稿日時 - 2011-12-24 21:19:24

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

IBMホームページビルダーのどこでも配置モード写真の貼り付け同じ方法で背景を作成すれば。

私の使用例
背景画像の指定
<div style="position:absolute;top:0;left:0;width:100%;">
<img src="r014p.jpg" style="width:100%;" alt="駿河竜爪山由来"></div>
背景画像の上に文字等の指定
<div style="position:absolute;top:1em;left:0;width:100%;">
必要の内容の記述
</div>

背景画像は、画像解像の大きさにより拡大等しています。(基本ホントを変更すれは出来ます)
画像解像により背景画像を作成しなとうまくいきませんが上記方法で指定すれば写真は1枚ですみます。

対象ホームページ例 http://ryuso.info/r/r001.htm

対象ホームページを拡大等すれば解ると思います

どこでも配置モード写真の貼り付け作成例 http://ryuso.info/h001/h001.htm

参考URL:http://ryuso.info/r/r001.htm

投稿日時 - 2011-12-23 16:48:06

あなたにオススメの質問