質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1157閲覧

bootstrap background-image について

gomakasu423

総合スコア31

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/04/28 18:13

いつもお世話になっております。
bootstrapにてLp制作中ですがbackground-imageがうまく反映されないので
ご教示いただければと思います。

下記url にて学習です(1:29:06付近)
https://www.youtube.com/watch?v=V_lAhqLXT9A

イメージ説明
こちらが正解の画像

イメージ説明
こちらが自身でコーディングした画像です

HTML

1 2 </div> 3 </div><!---End Row Dark ---> 4 <div class="fixed-wrap"> 5 <div class="fixed"> 6 </div> 7 </div> 8 </div><!---End Fixedbackground --> 9 </div>

css

1.fixed{ 2 background-image: url(img/apple.png); 3 z-index: -1; 4} 5 6.fixed-background h3{ 7 margin-bottom: 2rem; 8 9} 10.fixed-background p{ 11 margin-top: 1.5rem; 12 13} 14 15/*============ BOOTSTRAP BREAK POINTS: 16 17Extra small (xs) devices (portrait phones, less than 576px) 18No media query since this is the default in Bootstrap 19 20Small (sm) devices (landscape phones, 576px and up) 21@media (min-width: 576px) { ... } 22 23Medium (md) devices (tablets, 768px and up) 24@media (min-width: 768px) { ... } 25 26Large (lg) devices (desktops, 992px and up) 27@media (min-width: 992px) { ... } 28 29Extra (xl) large devices (large desktops, 1200px and up) 30@media (min-width: 1200px) { ... } 31 32=============*/ 33

以上、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/04/29 02:56

スクリーンショットでフォーカスしている要素と、ご提示のコードの要素は、違うもののようですが、なにか意図はありますか?
yoshinavi

2019/04/29 04:37

このコードだと、高さが「0(ゼロ)」なだけでは?
guest

回答1

0

ベストアンサー

こちらheight, widthを与えてあげることと、 background-attachment: fixed を与えてあげると動かない背景画像を作成できるかもしれないです!
例)

css

1.fixed { 2 height: 500px; 3 width: 100%; 4 z-index: -1; 5 background-image: url(img/apple.png); 6 background-attachment: fixed; 7}

https://www.tagindex.com/stylesheet/box/background_attachment.html

投稿2019/05/30 18:06

編集2019/05/31 07:24
fumito_94

総合スコア679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問