나는 혼합하기 위해 노력하고있어 background-image및 background-size일손에 속성 background속성입니다. W3C 문서를 기반으로 속성 background-size뒤에 background-position슬래시 ( /)로 구분 되어야합니다 .

W3C 예 :

p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; }

다음과 같습니다.

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em 10em;
    background-repeat: round round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }

MDN도 같은 말을합니다. 나는 또한 발견 이 와 이 속기 CSS3 배경 속성이 설명에 대한 기사를.

그러나 이것은 작동하지 않습니다! 또한 약식 만드는 방법을 분명하지 않다 background속성을 때 background-size와 background-position두 개의 서로 다른 값을 가질 수 background-position-x및 background-position-y또는 같은 일 background-size. 슬래시 ( /)가 어떻게 발생하는지 명확하지 않습니까? 이 예제 는 내 Chrome 15에서 작동하지 않습니다.

내가 축약하려고 시도한 예는 다음 CSS 코드입니다.

div {
    background: url(http://www.placedog.com/125/125) 
        0 0 /  150px 100px
        repeat no-repeat
        fixed border-box padding-box blue;
    height: 300px;
    width:360px;
    border: 10px dashed magenta;
}

더 깨끗한 예

이것은 작동합니다 ( JSFiddle )

 body{
        background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
        background-position:200px 100px;
        background-size:600px 400px;
        background-repeat:no-repeat;
    }

이것은 작동하지 않습니다 ( jsfiddle )

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}

이것도 작동하지 않습니다 ( jsfiddle )

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}

답변

귀하의 jsfiddle background-image대신background
“아직이 브라우저에서 지원하지 않는”경우 인 것 같습니다.

이것은 Opera에서 작동합니다 : http://jsfiddle.net/ZNsbU/5/
그러나 FF5 나 IE8에서는 작동하지 않습니다. (오래된 브라우저의 경우 : D)

코드 :

body {
  background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}

다음과 같이 할 수 있습니다.

body {
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
    background-size:20px 20px
}

FF5 및 Opera에서는 작동하지만 IE8에서는 작동하지 않습니다.

답변

당신은 할 수 있습니다

 body{
        background:url('equote.png'),url('equote.png');
        background-size:400px 100px,50px 50px;
    }

답변

참고 용으로 : 나는 이렇게 속기하려고했습니다.

background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;

그러나 iPhone Safari 브라우저는 고정 위치 요소로 이미지를 제대로 표시하지 못했습니다. 나는 게으 르기 때문에 고정되지 않은 사람과 확인하지 않았습니다. 나는 background 속성 뒤에 background-size를 두도록주의하면서 CSS를 아래의 것으로 전환해야했다 . 반대로 수행하면 배경이 배경 크기를 이미지의 원래 크기로 되돌립니다. 그래서 일반적으로 배경 크기를 설정하기 위해 속기 사용을 피할 것입니다.

background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;

답변

이렇게 해봐

body {
   background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
     }


/* 100px is the background size */

답변

다른 브라우저를 지원하려면 공급 업체 접두사를 사용해야하므로 속기에서 사용할 수 없습니다.

body {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}