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

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

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

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

Q&A

1回答

1658閲覧

レスポンシブデザインのbackground-image

take10000

総合スコア8

CSS

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

0グッド

0クリップ

投稿2017/01/29 14:14

PCからスマホ表示するときのレスポンスデザインで、
背景画像に指定してある画像を可変でうまく表示させたいです。

しかし、左上が固定され、画像の大きさが変わらず、画像の右側が見えなくなります。
うまく画像全体が収まりません。

PC
div. h2{
width:512px;
height:79px;
margin:0 0 10px 0;
padding:498px 0 0 460px;
background-image:url(~title.jpg);
background-position:left top;
background-repeat:no-repeat;
line-height:160%;
}

sp(798以下)

div.h2{
max-width:80%;
height: 0;
backgroung-size:cover;
backgrounr-position:center;
margin:0 0 10px 0;
padding:58.43% 0 0 70%;
background-image:url(title.jpg);
background-position:left top;
background-repeat:no-repeat;
line-height:160%;
}

background:cover,contain を試しましたがうまくいきません。

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

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

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

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

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

kei344

2017/01/29 14:43

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

とりあえず誤字があるので、全体をチェックされることをお勧めします。

CSS

1/* backgroung-size:cover; 2 backgrounr-position:center; 3 ↓ */ 4 background-size:cover; 5 background-position:center;

【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

【Web関係者は知っておくべきGoogleChromeデベロッパーツールの使い方 | Ocadweb】
http://ocadweb.com/web/googlechromedevelopertools

投稿2017/01/29 14:50

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問