배경 그림 2 시나리오 - 1 높이가 크고 다른 하나는 작음

Question

나는 navbar에 배경 그림 2 시나리오를 가지고 있습니다. (그것이 내가 위치한 곳이라고 생각합니다 - 저는 초보자/CSS입니다).

다음에 배경 이미지의 높이가 큰 :

.navbar-brand { 
    font-size:1.5em 
} 
header { 
    background-image: url(../../images/backpic.jpg); 
    background-repeat: none; 
    background-attachment: scroll; 
    background-position: center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
    text-align: center; 
    color: #fff 
} 

이 두 번째의 배경 이미지의 높이가 작은 : 나는 높이를 만들기 위해 노력하고

.navbar-default.navbar-shrink .navbar-brand { 
    font-size:1.5em 
} 
header { 
    background-attachment: scroll; 
    background-position: center center; 
    background-repeat: no-repeat; 
    text-align: center; 
    color: #fff; 
    background-image: url(../../images/backpic.jpg); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

두 번째 것, 조금 크지 만 첫 번째 것만 큼 크지는 않습니다.

나도 'ASDFADF'글자 부분 인 navbar의 왼쪽 가운데 부분에 멋진 컨테이너를 추가하고 싶습니다.

Answer 1

우선 가장 먼저 스타일을 정리해 보겠습니다. 선언 한 모든 배경 속성을 background이라는 하나의 속기로 결합 할 수 있습니다. 여기에 코드가 정리되지 것 :

.navbar-brand { 
    font-size:1.5em 
} 
header { 
    background: url(../../images/backpic.jpg) center center/cover no-repeat; 
    text-align: center; 
    color: #fff 
} 

background-size하는 것은 더 이상 공급 업체 접두사를 필요로하며, 위의 선언으로 결합 할 수 있습니다.

다음, 다음을 수행, 두 번째 이미지 배경의 크기를 증가시키는 :

.navbar-default.navbar-shrink .navbar-brand { 
    font-size:1.5em 
} 
header.smaller { 
    background: url(../../images/backpic.jpg) center center/cover no-repeat; 
    background-size: 125%; /* Adjust this value to the desired size */ 
    text-align: center; 
    color: #fff; 
} 

당신은 당신이 따로를 타겟팅 할 수 있도록 두 번째 용기에 다른 클래스를 추가 할 수 있습니다 (둘 다 이후 동일한 기본 요소 선택자를 사용하십시오).