🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

2回答

991閲覧

background-imageが反映されない

Wakanaa

総合スコア4

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2019/09/18 09:19

編集2019/09/18 11:21

boorstrapのチュートリアルを参考に、background-imageを表示させたいのですが、表示できません。

html

1<div class="landing"> 2 <div class="home-wrap"> 3 <div class="home-inner"> 4 </div> 5 </div> 6 </div> 7 8 <div class="caption text-center"> 9 <h1>Welcome to Solotravelapp</h1> 10 <a class="btn btn-outline-primary btn-lg" href="#">Get Started</a> 11 </div>

css

1 2.home-inner { 3 background-image: url(imges/baloon.jpg); 4}

url部分に""や''を付けたり、../として試して見たのですが、反映されませんでした。なぜなのでしょうか。

![イメージ説明]
画像は表示されるようになったのですが、このように伸びてしまいます。

CSS

1.home-inner { 2 background-image: url("../images/baloon.jpg"); 3 background-repeat:no-repeat; 4 background-position:center; 5 background-size: 100% 500px; 6 height:500px; 7}

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

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

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

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

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

Lhankor_Mhy

2019/09/18 09:26

imges/baloon.jpg ↑これは合っていますか?↓ではないですか? images/baloon.jpg
x_x

2019/09/18 09:26

<div class="home-inner">ここに文字を入れるとどうなりますか?</div>
Wakanaa

2019/09/18 09:33

@Lhankor_Mhy様 フォルダの名前ごとimgesになっていたのでフォルダ、ファイルのスペル編集しました。ご指摘ありがとうございます。 まだ画像は表示されないままでした。
Wakanaa

2019/09/18 09:33

@x_x様 文字だけ表示されました。
yoshinavi

2019/09/18 10:08

問題となっているHTMLファイル、CSSファイル、画像を収めているフォルダ。 これらファイルの位置関係はどうなっていますか?
guest

回答2

0

画像のアスペクト比が期待通りにならない点については、 MDN の表記も参考にしつつ、 background-size: cover;background-size: contain; を試してみてください。

投稿2019/09/27 05:00

thyda.eiqau

総合スコア2982

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

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

0

Pathにダブルクオーテーションをつけ、
高さも与えてみるといかがでしょうか。

.home-inner {   background-image: url("imges/baloon.jpg");   height: 350px; }

投稿2019/09/18 09:29

hatsu

総合スコア1809

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

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

Wakanaa

2019/09/18 09:39

ご回答ありがとうございます。 高さは変わったのですが、画像は表示されませんでした。
hatsu

2019/09/18 10:25

質問が多くて恐縮ですが、、 CSSがcss/style.cssのような場合は、パスを../images/baloon.jpgにする必要があります。 ディレクトリの構造を元にパスが正しいでしょうか? また例えば、https://www.pakutaso.com/shared/img/thumb/KAZUHIRO171013022_TP_V.jpg のような画像だと表示されるでしょうか?
Wakanaa

2019/09/18 11:23

パスを変えたところ表示されるようになりました!ありがとうございます。 画像が伸びてしまうのはどの部分を編集したら良いのでしょうか?
hatsu

2019/09/18 11:28

.home-inner {   background-image: url("imges/baloon.jpg");   height: 350px; } で現在高さを350pxと指定しているので編集してみてください!
Wakanaa

2019/09/20 10:57

上に追記したコードのように高さなどを編集してみたのですが、上手くいきませんでした。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問