スケルトンCSSグリッドを使用してブラウザで一杯になる背景(画像または色)を作成したいと思っていますか? http://getskeleton.com - スケルトンをダウンロードした場合、コンテナは最大幅960ピクセルの12列の流体グリッドになります。したがって、ヘッダーdivを作成し、それにクラスを割り当ててその背景イメージを変更したい場合、それは960コンテナ内にとどまります。それはブラウザの全幅には及ばない。 960 &を越えるためにコンテナの外側のヘッダーを取ると、グリッドが破損します。私はコンテンツが960グリッド内にとどまることを望みますが、背景はブラウザの端まで伸びています - どんなアイデアですか?スケルトンCSSフレームワークで背景画像と色を全幅に伸ばす
0
A
答えて
0
は、これを行うには、いくつかの方法があり、そしてあなたの制限を知らなくても、私は提案します:あなたはそれに応じてスタイルすることができますコンテナクラスの外に余分な要素を作成します。単一ページ全体のコンテナを使用するのではなく、あなたは
HTML
<div class="header">
<div class="container">
<div class="row">
<div class="twelve columns"></div>
</div>
</div>
</div>
この
CSS
.header {
width: 100vw;
height: 25vh;
background-color: blue; }
が
Skeleton Demoで使用される方法です...サイト、
header>container | section>container | footer>container
などの各セクションのための容器を使用することができます。 このメソッドの実装方法については、
Skeleton Demo source codeをご覧ください。
0
絶対配置要素を使用すると、背景を別の要素にジャムすることができます。マスターコンテナはposition: relative
なので、left: 50%;
とtransform
を使用してセンターコンテナにする必要があります。 top: 0
は、親のパディングを無視するようにしますが、背景をパディングに拡張したくない場合は、それを親コンテナと一致するように要素に追加する必要があります。 width: 100vw
は、vw
単位がビューポートを基準にしているので、全幅になります。
position: absolute;
width: 100vw;
left: 50%;
top: 0;
transform: translateX(-50%);
background: red;
height: 100%;
関連する問題
- 1. CSS:背景色の背景画像
- 2. 背景画像で画像を伸ばす方法
- 3. Twitter Bootstrap - 全幅の背景(画像)
- 4. html css - 画像選択の背景色
- 5. 背景画像がページ幅いっぱいに伸びない
- 6. 画像を背景として伸ばす
- 7. 背景画像が完全に伸びていない
- 8. CSS背景画像
- 9. 背景画像を縦に伸ばす方法
- 10. CSSの背景を使用して背景を塗りつぶす画像を伸ばす
- 11. クロスブラウザのCSSのソリューションは、高さの背景画像に伸ばし
- 12. 使用CSSの背景色の上に背景画像を作成する
- 13. Androidの背景画像の伸び
- 14. 背景画像上にCSSオーバーレイ画像
- 15. CSSホバリングで動的に幅の背景画像
- 16. 背景画像Divの100%の高さを伸ばします
- 17. IE7のdiv背景画像を伸ばす
- 18. フェイザー:背景画像を100%伸ばしますか?
- 19. C#Winformsフォームの伸ばした背景画像を取得
- 20. Jquery CSS背景画像rotate
- 21. CSSの画像背景
- 22. スクロールCSSの背景画像
- 23. CSS内の背景画像
- 24. GWT CSSの背景画像
- 25. フッタの背景画像CSS
- 26. CSSの背景画像&ドロップシャドー
- 27. オーバーライドCSSの背景画像
- 28. WebpackインラインCSS背景画像
- 29. フェードイン/アウト背景画像CSS
- 30. CSS背景RGBA&BG画像
css background-coverを使用してください。 –