답변:
이미지를 더 크게 만들어야하는 경우 이미지 편집기에서 이미지 자체를 편집해야합니다.
img 태그를 사용하면 크기를 변경할 수 있지만 이미지가 다른 내용의 배경이되어야하는 경우 원하는 결과를 얻지 못합니다 (원하는 것처럼 반복되지 않습니다) ...
이것은 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;
}이미지 너비를 배경 위치 영역에 전체에 맞게 조정합니다.
추가 참고
필요한 크기가 고정 픽셀 크기 인 경우 실제 이미지의 실제 크기를 조정하는 것이 좋습니다. 이는 이미지 소프트웨어가 브라우저보다 더 나은 작업을 수행 할 수 있도록 크기 조정의 품질을 향상시키고 원본 이미지가 표시하는 것보다 큰 경우 대역폭을 절약하기위한 것입니다.
CSS 3 만 지원합니다.
background-size: 200px 50px;그러나 이미지 자체를 편집하여 사용자가 덜로드해야하며 앤티 앨리어싱이없는 축소 된 이미지보다 더 좋아 보일 수 있습니다.
background: url('resized_image.png')\9;IE에 대한 9 LT
사용자가 Opera 9.5 이상, Safari 3 이상, Internet Explorer 9 이상 및 Firefox 3.6 이상 만 사용한다면 대답은 그렇습니다. 그렇지 않으면 아닙니다.
배경 크기의 속성은 CSS 3의 일부이지만, 대부분의 브라우저에서 작동하지 않습니다.
귀하의 목적을 위해 실제 이미지를 더 크게 만드십시오.
불가능합니다 . 배경은 항상 가능한 한 크지 만으로 반복되지 않도록 할 수 있습니다 background-repeat.
background-repeat: no-repeat;둘째, 배경이 상자의 여백 영역으로 들어 가지 않으므로 배경을 상자의 실제 내용에만 표시하려면 패딩 대신 여백을 사용할 수 있습니다.
셋째, 배경 이미지가 시작되는 위치를 제어 할 수 있습니다. 기본적으로 상자의 왼쪽 상단이지만 다음과 background-position같이을 사용 하여 제어 할 수 있습니다 .
background-position: center top;또는 아마도
background-position: 20px -14px;네거티브 포지셔닝은 CSS 스프라이트 와 함께 많이 사용됩니다 .
잊혀진 논쟁 이 하나 있습니다 .
background-size: contain;이것은에서 background-image와 같이 확장되지 않습니다 cover. 더 긴면이 외부 컨테이너의 너비 나 높이에 도달 할 때까지 늘어나 이미지를 보존합니다.
편집 :도있다 -webkit-background-size및 -moz-background-size.
background-size 속성은 IE9 +, Firefox 4+, Opera, Chrome 및 Safari 5+에서 지원됩니다.
@tetra가 제공 한 답변을 지원하기 위해 이미지가 SVG 인 경우 실제 이미지의 크기를 조정할 필요가 없음을 지적하고 싶습니다.
SVG 파일은 단지 XML이므로 XML 내에 표시 할 크기를 지정할 수 있습니다.
그러나 다른 장소에서 동일한 SVG 이미지를 사용하고 다른 크기 여야하는 경우 사용하는 background-size것이 매우 유용합니다. SVG 파일은 기본적으로 래스터 이미지보다 작으며 CSS를 사용하여 즉시 크기를 조정하면 성능 비용을 잃지 않고 품질을 거의 또는 전혀 잃지 않고 매우 유용 할 수 있습니다.
다음은 간단한 예입니다.
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}(참고 : 이것은 Firefox 8, Safari 5.1 및 Chrome 16.0.912.63이 설치된 OS X 10.7에서 작동합니다.)
CSS3으로 완전히 할 수 있습니다.
body {
background-image: url(images/bg-body.png);
background-size: 100%; /* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;
}이렇게하면 배경 이미지의 크기가 본문 요소 너비의 100 %가되고 본문 요소의 해상도가 작아 질수록 배경의 크기가 조정됩니다.
예를 들면 다음과 같습니다. http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
당신은 작성했습니다
background: url('bg.gif') top repeat-y;
background-size: 490px;컨테이너의 크기에 따라 배경 만 표시됩니다.
배경 URL이있는 빈 컨테이너가 있고 배경 크기가 무엇이든 bg.gif가 표시되지 않습니다.
콘테이너의 크기를
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;위에서 작성한 코드와 결합하면 bg.gif 파일을 볼 수 있습니다.
버튼에는 배경 이미지를 사용하지만 너비와 높이를 설정하더라도 텍스트와 동일한 크기의 이미지 만 표시합니다. 대신 문자로 문자를 채 웁니다 (공백이 아닌 공백). 기본적으로 모든 버튼 배경이 나타날 때까지 필요한만큼 많이칩니다. 따라서 다음과 같은 코드가있을 수 있습니다.
스타일 시트에서 :
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}HTML 문서에서 :
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->예 :
배경 이미지는 항상 컨테이너 크기 (너비 100 % 및 높이 100px)에 맞습니다.
크로스 브라우저 CSS :
.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;}
background-size동일한 background속성 으로 설정 하려면 다음을 사용할 수 있습니다.
background:url(my-bg.png) no-repeat top center / 50px 50px;