CSS 배경색 문제

나는이 div에 머리말 div가있다. navbar가 있고 그 뒤에 몇 가지 내용이있다. 나는 그 머리말 div에 배경색을 주었지만 그 배경은 구멍의 화면 너비 i만을 덮지 않는다. 싶어 그 배경은 구멍 화면 너비를 커버하지만, 거기에 왼쪽 상단과 오른쪽 에 공백이며, 여기에 HTML 코드입니다 :CSS 배경색 문제

<!--Start header section--> 
<div class="header"> 
    <div class="container"> 
    <div class="top-nav"> 
     <h1>Apptastico</h1> 
     <ul> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Work</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    <div class="content"> 
     <img src="photos/iPhone.jpg" alt=""> 
     <div class="web-design"> 
      <h1>We design iOS apps</h1> 
      <h4>Ut In Nulla Enim. Phasellus Molestie Magna Non Est Bibendum Non Venenatis ut In Nulla Enim. Phasellus Molestie.</h4> 
      <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu 
      tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. 
      Phasellus molestie tempor. Suspendisse dictum feugiat. 
      </p> 
      <input type="submit" value="Request qoute"> 
     </div> 
    </div> 
</div> 
</div> 
<!--End header section-->

및 CSS 코드를 여기에

.header{ 
    background-color: #4b5a65; 
    height: 505px; 
    overflow: hidden; 
    padding-top: 10px; 
}

하고 그게입니다 결과는 브라우저 화면에 나타납니다 :

출처

2016-10-19 Khaled

는 그와 함께 제공, 나는 페이지에 이미지 또는 입력 태그를 넣어 보통

.header{ 
 
    background-color: #4b5a65; 
 
    height: 505px; 
 
    overflow: hidden; 
 
    padding-top: 10px; 
 
} 
 
body{ 
 
    margin:auto; 
 
}

<!--Start header section--> 
 
<div class="header"> 
 
    <div class="container"> 
 
    <div class="top-nav"> 
 
     <h1>Apptastico</h1> 
 
     <ul> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Work</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="content"> 
 
     <img src="photos/iPhone.jpg" alt=""> 
 
     <div class="web-design"> 
 
      <h1>We design iOS apps</h1> 
 
      <h4>Ut In Nulla Enim. Phasellus Molestie Magna Non Est Bibendum Non Venenatis ut In Nulla Enim. Phasellus Molestie.</h4> 
 
      <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu 
 
      tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. 
 
      Phasellus molestie tempor. Suspendisse dictum feugiat. 
 
      </p> 
 
      <input type="submit" value="Request qoute"> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<!--End header section-->

출처

2016-10-19 02:13:33 repzero

이것은 중요한 부분입니다! @ Khaled이 답변을 시도하십시오. – Anson

예 저와 함께 작동 해 주셔서 감사합니다. – Khaled

왜 더 이상 여백을 두어야합니까? – Khaled

귀하의 배경은 전체 화면을 복용하지 않습니다. 전체 너비를 취하기 위해서는 배경을 언급해야합니다.

background-size : 표지;

출처

2016-10-19 02:13:19

문제는 * body * 요소가 재설정되지 않는다고 생각합니다. – Anson

나는 한번 시도했지만 작동하지 않았다. – Khaled

무슨 뜻인가요? – Khaled

<img src="photos/iPhone.jpg" alt="" /> 

<input type="submit" value="Request qoute" />

아래 니펫을 참조

body{ 
    margin:auto; 
}

을 적용 t에서 슬래시 그는 끝납니다. 이것은 차이가있을 수도 있고 그렇지 않을 수도 있습니다.

해당 이미지의 대체 텍스트와 동일합니다. 임의의 단어를 입력 해보십시오.

출처

2016-10-19 02:26:23 CFl

CSS 배경색 문제

답변

관련 문제