부트 스트랩 CSS/HTML 배경 이미지 크기 조정

브라우저 크기를 조정할 때 부트 스트랩을 사용하면 배경에있는 그림이 축소되고 배경색이 줄어 듭니다. 여기부트 스트랩 CSS/HTML 배경 이미지 크기 조정

http://codedifferently.com/crest.html 내가 사용하는 CSS 코드입니다 : 여기

는 HTML 코드를 포함하는 사이트에 대한 링크입니다 만약 내가 제대로 이해하고

@charset "UTF-8"; 

/* CSS Document */ 


/* Move down content because we have a fixed navbar that is 50px tall */ 

body { 
    padding-top: 0px; 
    padding-bottom: 20px; 
} 

div.jumbotron { 
    background-image: url('img/chicago2.jpg'); 
    background-color: #3FF; 
    background-size: 100%; 
    height: 500px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
} 

div.navbar navbar-default navbar-static-top" role="navigation { 
    border: 0px; 
}

출처

2014-10-05 cbandara

배경색이 줄어들지 않는다고 말하면 이미지 뒤의 파란색을 의미합니까? –

예, 크기를 조정하는 방법에 대한 권장 사항이 있습니까? 나는이 웹 사이트처럼 보이길 원한다 : http://www.crestonsolutions.com/ 그것은 wordpress로 만들어졌지만 영원히로드하는 데 걸린다. 정적 사이트이므로 HTML과 CSS를 사용하여 다시 빌드하는 것이 더 좋을 것이라고 생각했습니다. – cbandara

배경 크기 변경 : 100 % 배경 크기 : 표지; div.jumbotron에서 –

, 확실하지의 background-color는 않기 때문에 NOT 줄어들지 만, 이미지의 크기가 조절되어야하고 색상이 달라야 함을 의미한다고 생각합니다. 아니요.은 현재 전체보기 인 것처럼 나타납니다. 그래서 정확하게 이해한다면.

변경이 :

background-size: 100%;

background-size: cover;

및 브라우저의 공급 업체를 추가는 크로스 브라우저를 만들려면 :

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;

더 많은 정보를 볼에 대한 background-size

출처

2014-10-05 00:10:40 dippas

내 모든 CSS 태그를 div 태그에 추가합니까? – cbandara

첫 번째로 나는 대답에서'cover '에 대해'100 %'를 대신하여 말했듯이, 이것은 현대의 브라우저에서 잘 동작 할 것이지만이 클래스의 CSS 파일 안의 크로스 브라우저로 만들려면'div .jumbotron' 내 질문에 말한 것을 추가하십시오. 알다? – dippas

정답입니다. 배경 크기가 고정 높이가있는 div를 덮고 싶다면 (500px를 .jumbotron으로). 이미지는 이전처럼 더 이상 축소되지 않습니다. 이를 위해 다른 옵션이 있습니다. 1. div (.jumbotron)가 비율로 축소 될 수 있도록 퍼센트 높이 (50 % 등)를 사용할 수 있습니다. 2. css 미디어 쿼리를 사용하여 다른 화면 크기에 대한 div (.jumbotron)의 높이를 설정하십시오. 3. 배경 이미지 대신 실제 이미지 을 사용하십시오. –

귀하의 문제는 귀하의 전화 번호 background-attachment: fixed;에서 발생합니다. 스크롤 할 때 배경이 고정되고 background-position은 창에 상대적입니다. 그래서 결국, 당신의 배경은 당신의 창 (jumbotron)이 아닌 당신의 창에 상대적으로 집중됩니다.

는 CSS problem with background-attachment:fixed;

편집를 참조하십시오 나는 dippas의 솔루션 @ 선호합니다.

출처

2014-10-05 00:21:10

여기에서 문제가되지 않습니다. 위치 제거 : 고정이 수정되지 않습니다. – dippas

아시다시피 게시 후 답변을 다시 읽으면 문제에 대한 새로운 통찰력을 얻었습니다. 나는이 배경을 고쳐야하는 내 마음 속에 문제가 있었기 때문에 나는 약간 편향된 것으로 생각한다. 그래서 내가 너의 대답을지지했다. –

부트 스트랩 CSS/HTML 배경 이미지 크기 조정

답변

관련 문제