배경 이미지 및 그라데이션 - 이미지 크기 조절

Question

배경 이미지 및 그라디언트를 사용하고 있습니다 - 아래 코드를 참조하십시오. 파이어 폭스에서 작동하는 이미지 전용 높이를 설정하고 싶지만 사파리에서 작동하는 방법을 알아낼 수 없다. Safari에서 아래 코드를 사용하면 더 이상 배경 이미지가 표시되지 않는다.

background: #7f7f7f; /* Old browsers */ 
background: url(/images/star.png) no-repeat center center/70% auto, -moz-linear-gradient(top, #7f7f7f 0%, #5b5b5b 100%); /* FF3.6+ */ 
background: url(/images/star.png) no-repeat center center/70% auto, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f7f7f), color-stop(100%,#5b5b5b)); /* Chrome,Safari4+ */ 
background: url(/images/star.png) no-repeat center center/70% auto, -webkit-linear-gradient(top, #7f7f7f 0%,#5b5b5b 100%); /* Chrome10+,Safari5.1+ */ 
background: url(/images/star.png) no-repeat center center/70% auto, -o-linear-gradient(top, #7f7f7f 0%,#5b5b5b 100%); /* Opera 11.10+ */ 
background: url(/images/star.png) no-repeat center center/70% auto, -ms-linear-gradient(top, #7f7f7f 0%,#5b5b5b 100%); /* IE10+ */ 
background: url(/images/star.png) no-repeat center center/70% auto, linear-gradient(to bottom, #7f7f7f 0%,#5b5b5b 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7f7f', endColorstr='#5b5b5b',GradientType=0); /* IE6-9 */ 

코드에 문제가있는 사람이 있습니까?

Answer 1

해결.

아래 코드는 배경의 첫 번째 요소 (이 경우 이미지)의 너비를 제공 한 다음 두 번째 요소는 배경의 두 번째 요소, 즉 그라디언트의 너비를 설정합니다.

이것은 그라디언트를 사용하여 유동적 인 배경을 가진 반면 백그라운드의 이미지 크기를 제어 할 수 있음을 의미합니다.

background-size: 80% auto, 100% auto; 

전체 코드 예제

background: url(/images/star.png) no-repeat center center, -moz-linear-gradient(top, #7f7f7f 0%, #5b5b5b 100%); /* FF3.6+ */ 
background-size: 70% auto, 100% auto;