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

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

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

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

CSS

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

Q&A

解決済

4回答

1610閲覧

cssを使った背景画像の比率

arue

総合スコア43

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/02/17 07:18

編集2016/02/17 08:35

HTMLについての質問です。
かなりの初心者です。

レシポンシブにするためコーディングをしています。
そこで、トップの画像を背景にするためbackgroundで貼っているのですが、
縦横の比率を保ったままサイトに合わせて可変することができません。

heightを%にすると画像が表示されません。
色々な解説をみて恐らくbackground-size:100% auto; background-size:auto 100%;の指定が求めているものに近いのですが反映されません

以下悩んでいる部分になります。

先ほどの補足を付け足しております。

<html> <head> <meta charset="UTF-8"> <title>test</title> <style> *{ margin:0; padding:0; } .top{ width:100%; height:480px; background:url(common/images/top.png); background-size:cover; } </style> <body> <div class="top"></div> </body> ```2016/2/1716:14:42 回答頂いたcoverやbackground-size:100% 100%;にしても反映されず、パスは元ので画像の表示はされます。 [目標](http://www.allinthemind.biz/markup/css/background-size.html) こちらのサイトの100% auto - 横 縦 -の動きをして欲しいのです。。

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

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

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

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

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

guest

回答4

0

ベストアンサー

私も初心者ですが、heightの指定に%ではなく、vhを使ってみるのはいかがでしょうか?
対応ブラウザが限られてしまいますが...

http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html

投稿2016/02/17 11:24

Norako

総合スコア16

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

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

arue

2016/02/17 11:54

heightの指定をvwにしたところ上手くいきました!お教え頂いたあたりはしっかり勉強しようと思います。ありがとうございました!!
guest

0

画像にもよりますが、background-size:cover(またはcontain)のほうがいい感じになるかもです。

CSS

1.top{ 2width:100%; 3height:480px; 4background:url(common/images/top.png); 5background-size:cover; 6}

また、heightの100%が効かないのはこの辺の事情ではないでしょうか?
http://qiita.com/shouchida/items/205fed63b886681661bd

投稿2016/02/17 07:51

編集2016/02/17 07:57
narakener

総合スコア67

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

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

arue

2016/02/17 08:15

ご回答ありがとうございます。そちらでも試してみましたがみましたがやはり反映されませんでした。もっと根本的なミスがあるのかもしれません。。。
guest

0

これでよいかと思います。background-sizeの指定方法の問題ですね。

css

1.top { 2 width: 100%; 3 height: inherit; 4 background-image: url(common/images/top.png); 5 background-size: auto 100%; 6}

投稿2016/02/17 07:42

編集2016/02/18 00:11
yamato_hikawa

総合スコア2092

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

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

arue

2016/02/17 08:18

ご回答ありがとうございます。試してみましたが、縦の幅が480pxで固定された状態で反映がされました。heightをどうにか扱えないでしょうか。
yamato_hikawa

2016/02/17 11:00

height:480pxの部分を height:100% か height:inherit にしてみてください。 また、全体の背景であれば、 .top ではなく bodyに背景画像を設定することも検討してみてはいかがでしょうか。
yamato_hikawa

2016/02/18 00:12

回答を修正しました。こちらでいかがでしょうか。
guest

0

どういった構成になってるかわからないですが、backgroundのパスに誤りがあるのではないでしょうか?

root/index.html
∟ common/images/top.png
∟ css/style.css

上記の場合、style.cssにbackgroundを記述されているのなら、相対パスで記述しないと表示されません。

background:url(../common/images/top.png);

画像のあるパスとcssのあるパスを再度確認してみてください。

投稿2016/02/17 07:37

rihito

総合スコア34

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

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

arue

2016/02/17 08:21

ご回答ありがとうございます。元のurlで画像自体は表示されています。フォルダの構造は index.html→common→images→top.pngになっています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問