
フッタの背景画像をリピートxで左右に伸ばす方法について質問します。
色々なサイトを見て検証してみましたが、どのように試してもサイト自体の幅以上、画像が左右に伸びません。
切れてしまいます。
cssを載せますので、どなたかアドバイスをいただけたら嬉しいです。
よろしくお願いします。
____________________
#footer {
background-color:#ffffff;
color:#222;
height:100px;
text-align:center;
vertical-align:bottom;
padding-top:35px;
margin-top:13px;
background-image: url(<UserImg>/footer_bg.gif) ;
background-repeat: repeat-x;
background-position: top;
min-width:1025px;
overflow:visible;
}
No.1ベストアンサー
- 回答日時:
おそらくwidth指定がされているのでは?
例えば
/*-CSS-*/
.wrap{
wisth:400px;
}
.footer{
background-image:url(footer_img.gif):
background-repeat:repeat-x;
}
/*--HTML--*/
<div class="wrap">
<div class="footer">
画像が切れてしまう・・・
</div>
</div>
みたいな感じで
wrapにwidthを指定しているため途中で切れてしまいます。
これを解消するなら・・・
自分は
/*-CSS-*/
.wrap{
wisth:400px;
margin:0 auto 0 auto;
}
.footer_wrap{
wisth:400px;
margin:0 auto 0 auto;
}
.footer{
background-image:url(footer_img.gif):
background-repeat:repeat-x;
}
/*--HTML--*/
<div class="wrap">
コンテンツ
</div>
<div class="footer">
<div class="footer_wrap">
これなら画像が切れません
</div>
</div>
でやります!
・・・わかりますかね・・・^^;
回答ありがとうございます。
ずばり解決いたしました。
まさにhinanananaさんの言う通りでした。
footerをwrapから出すことで、できました。
本当にありがとうございます。
No.2
- 回答日時:
サイトの幅と言う意味がわかりませんが、示されたスタイルシートから想像できるのは、サイトの幅を決めてその中で設定しているとしか思えません。
なら、footerを内包する親コンテナブロックから出せば良いだけです。
<div class=section">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
↓
<div class=section">
<div class="header"></div>
<div class="body"></div>
</div>
<div class="footer"></div>
回答ありがとうございます。
親コンテナブロックから出すことで解決いたしました。
回答していただきすごく助かりました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS(初歩的)な質問です…float...
-
html の divとtable の役割
-
一括で全体を右にずらす
-
IE10でホームページがもの凄く...
-
IEだとリンクされるが他ブラウ...
-
.レスポンシブウェブデザインに...
-
HTML5のIE対策について
-
footerのclear:bothが効きません
-
[CSS]ヘッダー固定+コンテン...
-
ウェブサイトの作成方法について
-
h4→h2といったタグの使い方はし...
-
clearFixについて。
-
html5のhタグの厳密な使い方
-
タグをまとめて書くことが出来...
-
超初心者です スタイルシート...
-
文章が終わったら背景も自動的...
-
htmlにての参照・引用コード
-
SEO対策でH1をページの上のほう...
-
h1タグ 文字が大きくて目立...
-
idかclassか どっちが良いでし...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
グリッドレイアウトで"auto-fit...
-
min-heightとheightの違いについて
-
divとpの使いわけ
-
セクションをdivで囲むと見出し...
-
スペースを使わず文字位置を揃...
-
divの中に外部のHTMLを埋め込む
-
要素間、要素内に隙間が空く
-
body>div{}の意味を知りたい
-
ヘッダーを左右に二分割する方...
-
html5でheaderの中にnav
-
hタグを使わずに小見出し
-
CSSで、contentsがfooterに重な...
おすすめ情報