.jumbotron-item-main-image {
width: 50%;
height: 100%;
background-image: url("../img/igen.png");
}
이렇게만 넣으면 공간이 남아서 반복됨.
no-repeat을 넣어서 반복막음.
.jumbotron-item-main-image {
width: 50%;
height: 100%;
background-image: url("../img/igen.png");
background-repeat: no-repeat;
}
원본사진과 다르게 잘리므로
background-size: contain;
을 넣어준다.
.jumbotron-item-main-image {
width: 50%;
height: 100%;
background-image: url("../img/igen.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
위 를 다르게 축약해서 아래처럼 나타낼 수 있다.
background: url("../img/igen.png") no-repeat center / contain;
/* position과 사이즈 사이에 /를 넣어서 구분지어야한다. */