背景画像にレスポンシブ PNG 画像?

Question

次のようなページデザインを作成しようとしています:

をクリックしてください。

実は、成功しました。問題は、Web ページの解像度を変更すると、要素が重なり、背景の div と PNG の動作が異なり、すべてがひどいものになることです。 (position:absolute(PNG)とposition:relative(background)を使用してみました)

Answer 1

#background-size および background-position CSS プロパティを使用できます。この方法を試してみてください: ＃＃＃体 { 背景画像: url("あなたの背景画像.jpg"); 背景サイズ: カバー; 背景位置: 中央; } .responsive-image { 背景画像: url("あなたの画像.png"); 背景サイズ: 含む; 背景位置: 中央; 幅: 100%; 高さ: 100%; }