css 배경 이미지가 작동하지 않습니다.

내 인생에서 내 배경 이미지가 나타나지 않는 이유를 알 수 없습니다. 파일 경로가 정확합니다.css 배경 이미지가 작동하지 않습니다.

<section class="banner_area"> 
     <p>Hi, I'm a <span>Front-End Web Developer</span> 
      who makes clean and responsive designs come to life. 
     </p> 
</section>

와 CSS :

.banner_area { 
    background-image:url("images/banneralt4.jpg"); 
    height:600px; 
    background-attachment:fixed; 
    background-size:cover; 
    background-position:center; 
    position:relative; 
}

이 내 다른 하나 잘 작동 다음은 HTML입니다. 기본적으로 같은 코드. 배경색을 설정하면 잘 보일 것입니다.

출처

2013-07-29 Hobbes

배경 이미지가 있어야하는 위치에 있습니까? 내 추측은 '아니오'입니다. – Liam

파일 경로는 CSS 파일과 관련이 있습니다. plz 먼저 확인하십시오. 브라우저의 dev-console을 사용하여 네트워크 오류를 살펴보십시오. –

또는 파일이 존재하는 경우 파일을 업로드하기 전에 페이지를로드하려고 시도 했습니까? 브라우저가 깨진 것으로 캐시했을 수 있습니다. – Rooster

이미지 위치가 CSS 파일에 상대적입니다 (나는 당신의 CSS 폴더 내에있는 이미지 폴더를 의심). 당신의 설명에서 폴더 구조는 다음과 같다 : 스크립트

루트 폴더
- CSS
- 이미지

는 CSS 폴더가 같은 수준으로에서이므로 images 폴더에있는 이미지에 액세스하려면 한 수준 위로 올라야합니다. 따라서 귀하의 CSS에서 이미지의 위치는 다음과 같아야합니다 이미지 폴더 루트 폴더의 자식이기 때문에

background-image:url:("../images/banneralt4.jpg");

당신의 HTML에 직접 이미지를 추가 할 때 images/banneralt4.jpg이 일을하는 이유입니다.

출처

2013-07-29 16:01:04 spfuller

아, 작동했습니다. 자세한 설명을 해주셔서 감사합니다. 그걸 결코 알지 못했을거야. 나는 사람들이 "../"을 넣을 때 폴더 경로 나 누락 된 파일을 사용하고 있다고 생각했습니다. 문자 그대로인지 몰랐습니다. 나는 당신을 투표 하겠지만, 나는 충분한 평판이 없다. – Hobbes

이것은 나의 대답 – Vector

예와 정확히 같다. 그러나 그는 그것을 더 잘 설명했다. 죄송합니다 – Hobbes

CSS 폴더에있는 것 같습니다. 당신이 경로 출구에게 이미지 폴더와 직접 파일에

background-image:url("../images/banneralt4.jpg");

출처

2013-07-29 15:22:08 Vector

입니다. 귀하의 코드는 잘 작동합니다 : http://jsfiddle.net/EBXnc/ – ryanulit

나는 CSS 폴더, 이미지 폴더 및 스크립트 폴더가있는 내 메인 폴더가 있습니다. 예를 들어 내 로고처럼 완벽하게 다른 이미지를로드 할 수 있습니다. 파일 경로가 정확해야합니다. 네 말이 맞아. 그들은 내 CSS 폴더 안에 있지 않습니다. – Hobbes

css 배경 이미지가 작동하지 않습니다.

답변

관련 문제