2013-06-12 4 views
1

새로운 것들을 구현하는 데 미친 듯이 노력하기에 충분한 HTML/CSS를 이해하기 시작했습니다.부트 스트랩 삭제 html selector (배경 이미지)

뷰포트의 크기가 조절되는 전체 너비/높이 배경 이미지가있는 방문 페이지를 만들려고합니다. 그것은 CSS 프레임 워크를 사용하지 않고 페이지에 부트 스트랩을 구축하려는 경우에 충분히 쉬운 제안입니다.

부트 스트랩을 사용하면 본문 선택 도구 아래에 추가 한 모든 콘텐츠가 일반 상자 모델의 일부인 것처럼 내 배경 이미지를 지 웁니다. 부트 스트랩을 제거하면 페이지가 예상대로 작동하고 내용이 배경 이미지 위에 겹칩니다. 부트 스트랩에서 뭔가를 추측하고 있는데 모든 페이지 요소를 지우고 있지만 찾지 못했습니다. 나는 배경 이미지를 적용하기 위해 사용하고

코드입니다 :

html { 
background: url(../img/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
z-index: -999; 
} 
+0

루트 요소에 BG 이미지를 넣어해야합니까? 그렇지 않다면 Pier-Luc의 답이 작용합니다. – BjornJohnson

+0

질문을 게시 한 후 실제로 Pier 's 솔루션을 사용해 보았는데 효과가있었습니다. 루트 요소가 스타일을 적용 할 수 없다는 것이 약간 이상하게 보입니다. – PhilippeG

+0

부트 스트랩 (bootstrap)은 값 0으로 본문에 여백을 설정합니다. 여백> 0 인 모든 값은 원래 질문을 해결합니다. 따라서 루트 요소에서이 선언을 사용하려면 "body {margin-top : 1px}"와 같은 것을 추가하면됩니다. 그것이 당신의 레이아웃에 적합한 지 모르겠다. – BjornJohnson

답변

0

blog post 트위터 부트 스트랩을 사용하여 전체 화면 배경 이미지의 (간접) example 있습니다.

그것의 요지 인 :

body { 
    background: url(../img/bg.jpg); 
} 
+0

응답 부두 주셔서 감사합니다. – PhilippeG

+0

나는 부트 스트랩을 아주 잘 알고있는 척하지는 않지만 사용하고있는 CSS 리셋과 관련이있을 것입니다. 추신 당신이 작동하는 것을 얻을 때 대답을받는 것을 잊지 마세요! –

관련 문제