CSS를 통해 배경 이미지 자르기

Question

초보자로서 나는 지금 내가 뭘하려고하는지 잘 모르겠다. 내 작업을 위해 설정해야하는 webshop에서 우리는 제 3 자 템플릿 Lightspeed (전자 상거래 플랫폼) 용. 이 테마에는 3 개의 "강조 표시"항목이 있습니다. 이것은 배경 이미지 + 텍스트를 겹치게하고 제품을 표시하는 버튼입니다.

나는 800 픽셀에 다음 ID 년대의 최소 높이를 설정 한 :

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

지금까지 너무 좋아, 모든 작동합니다. 하지만 이제 모바일 플랫폼에서 (예, 오지 않는 것을 알고 있기 때문에 원하는 경우 이미 웃을 수 있습니다.), 당신은 짐작했습니다. 이미지가 너무 큽니다.

휴대 전화 플랫폼의 세로 모드에서 이미지 크기를 절반으로 줄이는 것이 좋으므로 이미지의 본질은 그대로 유지되고 사용자는 스 와이프하지 않아도됩니다. 페이지의 끝. 나는에 액세스 할 수있는 .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 등 내 페이지 순위에 영향을 미친 것으로 생각됩니다. 그 옵션이 아니라면

#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 자르기와 요소를 다룰 것 아래로 크기를 조절하거나 필요한 경우), 명시 적으로 background-size 속성을 사용하여 크기를 지정하거나 cover로 설정 또는 contain (요소가 가로로 채워지도록 가로 또는 세로 크기로 조정) 또는