CSSを使用して背景画像を切り取る

Question

初心者のために、私は何をしようとしているのか分かりません： 私の仕事のためにセットアップする必要があるウェブショップでは、 Lightspeed（eコマースプラットフォーム）用このテーマでは、3つの「ハイライト」アイテムがあります。これらは背景画像+テキストを重ね合わせて、商品を表示するためのボタンです。私は800ピクセルにこれらのIDのための最小の高さを設定している

：

#highlight-1,#highlight-2,#highlight-3 { 
    min-height: 800px; 
} 

これまでのところは良い、すべてが動作します。 しかし、モバイルプラットフォームでは（あなたが欲しいと思ったら、あなたが笑うことができますか？）、あなたはそれを推測しました：イメージはあまりにも大きいです。

モバイルプラットフォームの場合、ポートレートモードで画像を（おそらく約）半分にカットすることが大好きです。画像の本質はそのまま残っているため、ユーザーは1キロメートルほどスワイプする必要はありません。ページの終わり。私はへのアクセス権を持って.rainと.cssファイルの中に見つけることができます

唯一のものは、次のとおりです。

#highlight-1{ background: url('highlight_1_image.jpg') no-repeat;} 
#highlight-2{ background: url('highlight_2_image.jpg') no-repeat;} 
#highlight-3{ background: url('highlight_3_image.jpg') no-repeat;} 

私はテンプレート

のカスタムの.cssエディタへのアクセスを持って、このとを編集することができます

初心者を助けることができる人は誰ですか？事前に束をありがとう！ :)

Answer 1

理想的な解決策は、メディアクエリを使用してより小さいイメージを提供することです。これにより、限られたデータを使用しているモバイルビジターの帯域幅が削減され、Googleなどのページランキングに影響を与えると考えられます。それはオプションではない場合、あなたは明示的background-sizeプロパティでサイズを指定するか、またはcoverに設定することができます

#highlight-1{ background: url('highlight_1_image.jpg') no-repeat;} 

@media screen and (max-width: 767px) { 
    #highlight-1{ background: url('highlight_1_mobile_image.jpg') no-repeat;} 
} 

（スケールアップまたはスケールダウンので、画像の単一のインスタンスが必要に応じてトリミングして素子を覆うcompletleyます）またはcontain（要素が水平に塗りつぶされるように拡大または縮小されます）またはを