Как установить фон img над нижним колонтитулом

Я хочу, чтобы изображение покрывало все на странице, но <header> однако в нижней части всегда есть белая полоса пространства. Я использовал margin-right и margin-left, чтобы покрыть стороны, но margin-bottom не заполняет пустое пространство внизу.Как установить фон img над нижним колонтитулом

header { 
 
    margin-bottom: 20px; 
 
} 
 
h1 { 
 
    text-align: center; 
 
} 
 
nav { 
 
    text-align: center; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: inline; 
 
    padding-right: 5px; 
 
    padding-left: 5px; 
 
} 
 
li a { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
#wrapper { 
 
    background-image: url(rome.jpg); 
 
    -webkit-background-size: 100% 600px; 
 
    background-repeat: no-repeat; 
 
    height: 600px; 
 
    margin-right: -8px; 
 
    margin-left: -8px; 
 
}

<header> 
 
    <h1>Colin Bruin</h1> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="home.html">Home</a> 
 
     </li>| 
 
     <li><a href="code.html">Code</a> 
 
     </li>| 
 
     <li><a href="webpages.html">Webpages</a> 
 
     </li>| 
 
     <li><a href="articles.html">Articles</a> 
 
     </li>| 
 
     <li><a href="resume.html">Resume</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
<div id="wrapper"> 
 

 
    <main> 
 

 
    </main> 
 
</div>

источник

2017-01-11 Colin Bruin

код оленья кожа имеет 'footer' элемент (или' # footer' элемент) .. – haxxxton

@haxxxton, я не могу видеть, как это связано с вопросом пользователя на всех. –

Используйте CSS3 'background-size: contains;' или 'background-size: cover;' для вашего элемента '# wrapper'. –

body имеет по умолчанию некоторые margin, поэтому вы видите, что донное пространство так, влево/вправо пространство слишком (который вы использовали отрицательную маржу хак исправить его).

Для решения этой проблемы установите margin:0 в body, и вы не будете нуждаться в отрицательных margin с для левой/правой

body { 
 
    margin: 0 
 
} 
 
header { 
 
    margin-bottom: 20px; 
 
} 
 
h1 { 
 
    text-align: center; 
 
} 
 
nav { 
 
    text-align: center; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: inline; 
 
    padding-right: 5px; 
 
    padding-left: 5px; 
 
} 
 
li a { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
#wrapper { 
 
    background-image: url(//lorempixel.com/1000/1000); 
 
    -webkit-background-size: 100% 600px; 
 
    background-repeat: no-repeat; 
 
    height: 600px; 
 
}

<header> 
 
    <h1>Colin Bruin</h1> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="home.html">Home</a> 
 
     </li>| 
 
     <li><a href="code.html">Code</a> 
 
     </li>| 
 
     <li><a href="webpages.html">Webpages</a> 
 
     </li>| 
 
     <li><a href="articles.html">Articles</a> 
 
     </li>| 
 
     <li><a href="resume.html">Resume</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
<div id="wrapper"> 
 
<main> 
 
    </main> 
 
</div>

источник

2017-01-11 23:51:05 dippas

Вы ответили первым, но в моем ответе есть котенок !! :П – MarioZ

как это?

height:100%; 
 
margin:0; 
 
padding:0; 
 

 
} 
 
header { 
 
    margin-bottom: 20px; 
 
} 
 
h1 { 
 
    text-align: center; 
 
} 
 
nav { 
 
    text-align: center; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: inline; 
 
    padding-right: 5px; 
 
    padding-left: 5px; 
 
} 
 
li a { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
#wrapper { 
 
    background-image: url(https://placekitten.com/g/1000/1000); 
 
    -webkit-background-size: 100% 600px; 
 
    background-repeat: no-repeat; 
 
    height: 600px; 
 
} 
 
</style> </head>

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Colin's Page</title> 
 
    <meta charset="utf-8"> 
 

 
    <body> 
 
    <header> 
 
     <h1>Colin Bruin</h1> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="home.html">Home</a> 
 
      </li>| 
 
      <li><a href="code.html">Code</a> 
 
      </li>| 
 
      <li><a href="webpages.html">Webpages</a> 
 
      </li>| 
 
      <li><a href="articles.html">Articles</a> 
 
      </li>| 
 
      <li><a href="resume.html">Resume</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    <div id="wrapper"> 
 

 
     <main> 
 

 
     </main> 
 
    </div> 
 
    </body> 
 

 
</html>

источник

2017-01-11 23:56:10 MarioZ

Как установить фон img над нижним колонтитулом

ответ

Смежные вопросы