質問: ### 前提・実現したいこと Ruby on RailsでWEBサービスのランディングページを作成中です。 ランディングページに背景画像をレスポンシブに配置したいのですが、画像の縦の長さが切れてしまい困っています。 背景画像の縦幅、横幅ともにレスポンシブにするにはどうすればいいでしょうか。 イメージは下記のWantedlyさんのサイトの一番上の画像のような動きの表示にしたいと思っています。 https://www.wantedly.com/sync ### 発生している問題 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/cd3bf9339b20fea33f82445f02f4744a.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/65a0fdc09e7e818bdd0addfa96c75ac7.png) 上記のスクショのように、画像の横幅は画面サイズにあわせたレスポンシブになっているのですが、画像の縦幅が固定になってしまっています。 (スクショ上ですと画像の縦幅が変化しているように見えますが、実際には画像の縦幅が固定となり、縦幅固定の枠の中で画像の横幅のみ変化しています) ### 該当のソースコード HTMLファイルの該当部分 ``` this is test ``` CSSファイルの該当部分 ``` .top-image { background: url("top_image.png"); // max-width: 100%; // height: auto; background-size: cover; } ``` ### 試したこと CSSファイル内でheight: auto;など試してみましたが、変化がありませんでした。 (いまはコメントアウトしています) また、height: 1000px;などのように高さをpx指定もしてみましたが、レスポンシブにならずうまくいきませんでした。 ### 補足情報(言語/FW/ツール等のバージョンなど) Ruby on RailsでWEBサービスを作成中で、 http://getbootstrap.com 上記のbootstrapを導入しています。 ### 追記 修正後のスクショ ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/54c02556f10cea19db9eca4d3a4ba4f1.png)
回答: 私がやるとしたら h1の下あたりにimgタグでその画像を置きます。 その上で ``` .top-image { position:relative; } img{ position:absolute; width:100%; height:auto; } ``` とすると上手くいくのでは、と思います。