[css] background size 변경되지 않는 오류

// .css 
.mainLogo {
            background: url('../common/img/mainLogo.png')) left center no-repeat; 
            background-size: auto 15px;
            }

위와 같이 퍼블에서 .mainLogo에 대한 css를 전달받았으나
다양한 업체가 사용하기때문에 css의 고정적인 백그라운드 이미지 사용이 불가하여

 

// .css 
.mainLogo { background-size: auto 15px; }

// .jsp 
<h1 class="mainLogo" style="background: url(@(ViewBag.SiteLogo)) left center no-repeat;">
@ViewBag.SiteTitle
</h1>

/*@(ViewBag.SiteLogo)는 이미지 주소 url, 
@(ViewBag.SiteTitle)은 텍스트로 동적으로 변경되어야함. */

와 같이 변경하였는데 사이즈가 반영되지 않는 문제가 발생하였다.

 

css 파일에 background-size를 선언하였지만

jsp에서 background 속성의 옵션들을 지정하며

size가 반영되지 않는 탓이었고 

 

하기와 같이 인라인 스타일을 줄 때 사이즈까지 지정하니 정상적으로 반영되었다.

// .css 
.mainLogo { /*background-size: auto 15px;*/ }

// .jsp 
<h1 class="mainLogo" 
style="background: url(@(ViewBag.SiteLogo)) left center no-repeat; background-size: auto 15px;">
@ViewBag.SiteTitle</h1>