점보 트론 부트 스트랩의 배경 변경 3

-1

나는 나의 의견 중 하나에있는 점보트론의 배경 이미지를 변경하려고하고 있으며 단지 작동하지 않습니다. 스택에있는 수많은 게시물을 살펴본 후 제안 된 모든 솔루션을 시도했지만 그 중 누구도 나를 위해 일하지 않습니다. HTML점보 트론 부트 스트랩의 배경 변경 3

<html> 
    <head> 

     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <!-- Bootstrap --> 
     <link href="dist3/css/bootstrap.min.css" rel="stylesheet"> 
     <link href="css/style.css" type="text/css" rel="stylesheet"> 


    </head> 
    <body> 
     <nav class="navbar navbar-default navbar-fixed-top"> 
      <div class="container"> 
      <ul> 
       <li>About</li> 
       <li>Me</li> 
      </ul> 
      </div> 
     </nav> 

    <div class="content"> 
    <div class="jumbotron"> 
     <div class="container"> 
      <h1>Allan Araujo</h1>  
      <p>Example paragraph</p> 
     </div> 
    </div> 

    <section class="pink"> 
     <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12"><h3>.container-fluid</h3></div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-6">Column one</div> 
      <div class="col-xs-6">Column one</div>  
     </div> 
     </div> 
    </section> 

    <section class="green"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12"><h3>.container</h3></div> 
     </div>  
     <div class="row"> 
      <div class="col-xs-6">Column one</div> 
      <div class="col-xs-6">Column one</div>  
     </div> 
     </div> 
    </section> 
    </div> <!--END CONTENT--> 
    </body> 
    </html>

CSS : 다음과 같이

/* ============================================= JUMBOTRON ============================================= */ 
.jumbotron { 
    background: url('/img/congruent_pentagon.png') no-repeat center center !important; 
    background-size: cover; 
} 

.nav { 
    text-align: center; 
    padding: 0; 
    margin: 0; 
    background-color: red; 
    height: 10%; 
} 
.nav li { 
    display: inline-block; 
    margin-right: 5%; 
    margin-left: 5%; 
} 



.pink { 
    background-color: #f99; 
} 

.green { 
    background-color: #9f9; 
} 

section { 
    padding-bottom: 20px; 
}

내 폴더

가 구성되어 있습니다 : 그 문제라면 보러 URL을 변경하는 것을 시도했다

FOLDER 
--css 
    --style.css 
--dist 
--img 
    --congruent_pentagon.png 
--header.php 
--index.php

있지만, 문제를 해결하지 못했습니다. 이상한 부분은 바로 배경이 회색이지만, 내가 원하는 이미지를 표시하지 않습니다.

EDIT : 이제 전체 html/css 문서를 표시합니다. 탐색 막대에 PHP를로드하는 데 사용하고 있지만 여기를 더 쉽게 볼 수 있도록 여기에 결합했습니다.

출처

2014-12-23 GGMU

호기심에서'bootstrap' 앞이나 뒤에'styles'을로드하고 있습니까? – melancia

이 CSS 스타일을 코드에 추가하면 :'background-size : cover;', 작동합니까? – Luke

요소에 적용된'CSS' 규칙은 브라우저의 dev 도구를 사용하여 검사함으로써 쉽게 찾을 수 있습니다. – melancia

문제는 이미지의 URL에 관련되어, 온라인 예를 /img/congruent_pentagon.png로 변경 : http://jsfiddle.net/tthLjchm/1/

CSS는 : 문제는 이미지가 있다고

.jumbotron { 
    background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important; 
    height: 50%; 
    margin-top: 10px; 
    color: black; 
} 

.jumbotron p, h1 { 
    text-align: center; 
}

출처

2014-12-23 17:49:40

이 작동하지 않습니다. – GGMU

전에이 솔루션을 사용해 보았습니다. 제공된 예제가 제대로 작동하고 있으며 코드가 완전히 바뀌 었습니다. http://jsfiddle.net/tthLjchm/2/ 연결하려는 이미지가 사용 가능한 경우 (예 : http :// /localhost/img/congruent_pentagon.png) 그런 다음 색인 자원이 새로 고쳐 졌는지 확인하십시오. –

했다 내 CSS 폴더에 배치해야합니다.

출처

2014-12-24 02:42:04 GGMU

이미지가 CSS 폴더에 속합니까? – CrackSmoker9000

아니, 나는 그렇게 생각하지 않지만, 어떤 이유로 그것은 css 폴더 내의 이미지를 찾고 있었다. 내 전체 img 폴더를 css 폴더로 옮기더라도 작동합니다. – GGMU

점보 트론 부트 스트랩의 배경 변경 3

답변

관련 문제