전체 화면을 커버하는 배경

나는 전체 화면을 덮는 배경 이미지가 있습니다. 그러나 HTML 파일에 요소를 추가하면 배경 이미지는이 새 요소의 영역 만 덮고 나머지는 흰색이됩니다.전체 화면을 커버하는 배경

내 화면의 맨 아래까지 배경이 계속 표시되도록하려면 어떻게해야합니까?

#backgroundLanding { 
    background: url('/assets/images/landing_new4.jpg'); 
    background-size: auto; 
    background-position: center center; 
    background-attachment: fixed; 
    top: 0; 
} 

<div id="backgroundLanding" > 


    <div> 
    <!--Flight Search Directive--> 
    <!--flight-search> 
    </div> 


    <!--impressum></impressum--> 
    </div> 
</div>

background-size : 표지를 사용하면 동일하게 표시됩니다. 어떻게 해결할 수 있습니까? 문제가 배경 이미지와 함께하지

출처

2014-12-03 Dribel

바이올린 데모가 있습니까 ?? –

background-size : 100 % 100 % – aashi

, 당신은 메인 래퍼의 폭을 확인하고 화면 크기를 맞게 100 %로 설정

출처

2014-12-03 10:47:39 Katyoshah

나는 당신이 의미하는 것을 안다. 따라서 배경이 전체 화면을가립니다. 그러나 html 문서는 요소가있는 부분과 아래에있는 부분 만 볼 수 있습니다. 그래서 화면 하단에 아무 것도 고칠 기회가 없습니까? – Dribel

@ user3383709 실제로 할 수 있습니다. 내 대답을 업데이트했습니다. – Leo

내가 고정 래퍼의 위치를 만들 것,이를 추가해야 CSS :

#backgroundLanding { 
    position:fixed: 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    background-size:cover; 
}

는하지만이 내용이 스크롤하지 않습니다 것을 의미합니다. 그러나 나는 그것이 원하는 효과라고 믿는다.

새로운 내용이 문서에 동적으로 추가되는 경우에도 항상 화면을 채 웁니다.

출처

2014-12-03 10:50:06 lharby

부모 div의 높이는 명시 적으로 언급하지 않으면 해당 하위 요소에 따라 다릅니다. 그 이유는 하위 요소를 기반으로 배경을 볼 수 있기 때문입니다.

부모에게 필요한 높이를 언급하십시오. 당신이 전체 페이지에 그것을 원한다면, 당신은 몸에 배경을 줄 수 있습니다.

출처

2014-12-03 10:56:49 Bhuvana

배경 이미지가 컨테이너를 채우게하려면 background-size: cover;을 사용하면 이미지의 해상도가 그대로 유지됩니다.

그러나 컨테이너가 브라우저 창에 맞지 않는 것이 문제인 것처럼 보입니다. 자식 노드가 뻗어 있습니다.

@lharby는 하나의 솔루션을 제공합니다. 또 다른 해결책은 다음과 같이이다 :

html, body {height: 100%;} /* I assume #backgroundLanding is a child node of <body> */ 
#backgroundLanding { 
    background-image: url('/assets/images/landing_new4.jpg'); 
    background-size: cover; 
    height: 100%; 
}

이 내가 my own blog 사용에도 효과가있을 것이다.

출처

2014-12-03 10:56:50 Leo

전체 화면을 커버하는 배경

답변

관련 문제