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