background: url 쪽질 문입니다.

Question

해당이미지 넣는곳  background url (' 이미지 경로' ) no-repeat 0 0 /auto 150px  이부분 좀더 자세하게 설명해주실수 있으신가요?? no-reapte는 반복을 안하겠다는거같은데 무엇을 반복안시키는건지.. 뒤의 / auto 150px; 은 해당이미지를 세로 150px 가로는 자동으로 세로150px에 맞는 이미지로 보여주겠다는건지.. 이미지파일은 고해상도이미지로인해 원래크기?의 2배인 300px로 되있는데 이게 고해상도이미지가 아니라면 어떻게표현해야하는지요 또 고해상도이미지라 2배크기라고 해도 코드에서 그게 2배인지 어떻게 인식되서 -5100px이 아니라 -2550px인지 알고싶습니다.

1분코딩 · Answer

CSS background 이미지는 기본적으로 패턴 형태로 반복이 되는데요, no-repeat는 반복 하지 않고 한번만 그려주겠다는 의미입니다.
auto 150px은 background-size: auto 150px; 이런 식으로 따로 지정해줄 수 있는데, 이해하신 바가 정확히 맞습니다. 폭은 auto, 높이는 150px이니, 높이 150px에 맞는 비율로 맞춰서 폭을 표시해주겠다는 의미지요~
원래 이미지의 크기가 몇 픽셀이든 CSS에서 background-size 크기를 정해주었기 때문에, 2550px을 최대 크기로 볼 수 있게 되었다고 보시면 됩니다.