CSS 배경 이미지에 내 이미지가 표시되지 않습니다.

내 섹션 중 하나에 background-image 속성에 문제가 있습니다.CSS 배경 이미지에 내 이미지가 표시되지 않습니다.

<!DOCTYPE html> 
<html lang="pl"> 
<head> 
<meta charset="UTF-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css"> 
    <link rel="stylesheet" href="css/custom.css" type="text/css"> 
    <title>Elipsis</title> 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 
    <meta name="author" content=""> 
</head> 
<body> 
<header id="intro"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12"> 

      </div> 
     </div> 
    </div> 
</header> 
<main> 
<section id="about"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12"> 
      </div> 
     </div> 
    </div> 
</section> 
<section id="services"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12"> 
      </div> 
     </div> 
    </div> 
</section> 

</main> 
<footer id="contact"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12"> 
      </div> 
     </div> 
    </div> 
</footer> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

그리고 CSS : 다음은 HTML 코드

#intro { 
    background-image: url(.../.../img/intro.png); 
    background-image: url(intro.png);  
    background-image: url(".../.../img/intro.png"); 
    background-image: url("intro.png"); 
}

Index.html을 루트 폴더에가, CSS 파일은 루트/CSS에/... 그리고 intro.png 모두 루트/IMG에/... 및 루트 폴더. 왜 보이지 않는거야? 스택에 몇 가지 주제를 읽고 Google에서 몇 가지 기사를 읽었지만 아무 것도 작동하지 않는 것 같습니다.

출처

2017-01-06 grhu

두 점 (../)을 사용하고 상대 경로를 사용하는 경우 경로가 CSS 파일과 관련이 있는지 확인하십시오. – Pete

'url ("../ img/intro.png");'시도한 적이 있습니까? –

이미지의 요소에 내용이나 높이가 정의되어 있습니까? – j08691

background-image: url("intro.png");

당신이 CSS 규칙은 매우 마지막 줄이 적용됩니다 쓴 방법,

그래서 당신은 아마

에 그 변경하려면 (그것은 전에 다른 라인 덮어 쓰기)

#intro { 
    background-image: url("../img/intro.png"); 
    height: 300px; /*whatever value, if there is no content */ 
}

플러스 코멘트에 썼습니다 : 해당 요소에 내용이없고 정의 된 높이가 없으면 높이가 0이므로 배경 이미지가 보이지 않습니다.

출처

2017-01-06 14:39:06 Johannes

#intro { background-image : url (".../intro.png"); 신장 : 1000px; } 및 #intro { background-image : url ("intro.png"); 신장 : 1000px; } 루트 카탈로그의 intro.png에서도 작동하지 않습니다. – grhu

다른 편집 : 전체 CSS 규칙을 포함 – Johannes

마지막으로 'background-image : url ("../ intro.png"); '일해 줘서 고마워. 하지만 왜 많은 사이트와 주제에서 3 개의 점이 있는지 이해할 수 없습니다. – grhu

시도해보십시오. background-image : url ('../ img/intro.png');

나는 보통 적절한 경로를 얻기 위해 이미지를 끌어다 놓습니다. 이게 도움이 되길 바란다.

출처

2017-01-06 14:41:11 jmag

또한이 속성들을 추가합니다. background-repeat : no-repeat; background-size : 표지; – jmag

CSS 배경 이미지에 내 이미지가 표시되지 않습니다.

답변

관련 문제