배경색 속성이 내 머리글을 엉망으로 만들었습니다.

필자는 bround로 backround 이미지를 사용하는 600px 높이의 머리글을 가지고 있습니다. 화면이 1600px 이상인 경우 덮개를 사용하고 기본값이 포함됩니다. 헤더를 오버레이하는 것은 500px 높이의 이미지 (절대적으로 배치 된 이미지)입니다.배경색 속성이 내 머리글을 엉망으로 만들었습니다.

브라우저의 크기를 조정할 때 헤더의 높이가 유지되지 않으므로 오버레이 이미지가 헤더와 겹쳐서 쉽게 볼 수 있습니다.

/* ===== HEADER ==== */ 

header{ 
height: 600px; 
min-height:600px; 
width:100%; 
min-width:100%; 
background-image: url(../images/headerBG.jpg); 
background-repeat: no-repeat; 
background-size: contain; 

} 
#bgOverlay{ 
position: absolute; 
top: 60px; 
left: 30%; 
} 

/* ==== MEDIA QUERIES ==== */ 
@media only screen and (min-width:1600px){ 
header{background-size: cover;} 
}

그리고 그것을 볼 수있는 링크 : 여기

코드입니다 배경 크기 : http://www.madebym.net/test/crazysunsets/index.html

출처

2012-12-17 suludi

'background-size : 1600px 600px'를 입력하면 어떻게 될까요? 너의 높이와 너비 배경을 유지한다. (너가하고 싶은게 확실하지 않다.) – cheesemacfly

내 머리글은 항상 600px이고, bg- 이미지는 표지와 크기를 조정하고 포함하고 싶다. – suludi

배경 그림으로 비율이 올바르게 유지되지 않습니까? – cheesemacfly

내 문제를 해결하려면, 하나는 적용 할 필요가 100 % 600PX;

헤더의 크기는 항상 600px이고 이미지의 종횡비는 유지됩니다.

출처

2012-12-17 22:22:27 suludi

배경색 속성이 내 머리글을 엉망으로 만들었습니다.

답변

관련 문제