CSS2

이미지를 더 크게 만들어야하는 경우 이미지 편집기에서 이미지 자체를 편집해야합니다.

img 태그를 사용하면 크기를 변경할 수 있지만 이미지가 다른 내용의 배경이되어야하는 경우 원하는 결과를 얻지 못합니다 (원하는 것처럼 반복되지 않습니다) …

CSS3 _{^{가 힘을 발휘하다}}

이것은 CSS3에서 할 수 background-size있습니다.

모든 최신 브라우저는이 기능을 지원하므로 이전 브라우저를 지원할 필요가없는 경우이를 수행 할 수 있습니다.
_{지원되는 브라우저 :}

^{Mozilla Firefox 4.0 이상 (Gecko 2.0 이상), Microsoft Internet Explorer 9.0 이상, Opera 10.0 이상, Safari 4.1 이상 (webkit 532) 및 Chrome 3.0 이상}

.stretch{
/* Will stretch to specified width/height */
  background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
  background-size: 100% 100%;
}

.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
  background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
  background-size: Auto 150px;
}
.resize-fill-and-clip{
  /* Resize to fill and retain aspect ratio.
     Will cause clipping if aspect ratio of box is different from image. */
  background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
   Will cause gap if aspect ratio of box is different from image. */
  background-size: contain;
}

특히, 이전에는 없었던 새로운 제어 기능을 제공 하는 cover및 contain값이 마음에 듭니다.

일주

background-size: round반복과 함께 의미를 갖는 것을 사용할 수도 있습니다 .

.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
  background-size: round auto; /* Height: auto is to keep aspect ratio */
  background-repeat: repeat;
}

이미지 너비를 배경 위치 영역에 전체에 맞게 조정합니다.

추가 참고
필요한 크기가 고정 픽셀 크기 인 경우 실제 이미지의 실제 크기를 조정하는 것이 좋습니다. 이는 이미지 소프트웨어가 브라우저보다 더 나은 작업을 수행 할 수 있도록 크기 조정의 품질을 향상시키고 원본 이미지가 표시하는 것보다 큰 경우 대역폭을 절약하기위한 것입니다.

답변

background-size: 200px 50px;

background-repeat: no-repeat;

background-position: center top;

background-position: 20px -14px;

background-size: contain;

<div class="hasBackgroundImage">content</div>

.hasBackgroundImage
{
    background: transparent url('/image/background.svg') no-repeat 10px 5px;
    background-size: 1.4em;
}