#42 CSS Background-Image의 url 한줄로 position, size 정하기

CSS를 하다 보면 Background-image를 넣을 일이 종종 발생한다.

 

그럴 때 마다, 

// 예제 클래스명은 "box"

.box {
	background-image: url("<경로>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

※ 백그라운드 이미지를 이렇게 제일 많이 사용한다.

반응형처럼 보일 수 있기도 하고, 사용목적이 위와 같은 코드로 많이 상용되기도 하기 때문.

 

하지만 매번 이렇게 적는 방법은 손도 아플 뿐더러, Sass를 사용하고 있지 않다면 계속해서 이렇게 스타일링을 지정하는 것은 불편하기만 하다.

 

위와 똑같은 코드를 굉장히 압축 시킬 수 있는데, 아래와 같다

 

.box{
	background-image: center/cover no-repeat url("<경로>");
}

너무 간단하고 편하다..ㅠ

위와 같이 position / size repeat이라고 속성 값을 적고 url을 치면 된다.