Я не понимаю, почему фоновое изображение моего h1 имеет разрыв сверху и снизу. Я искал вокруг и не могу кого-то еще с подобной проблемой. Я пробовал кучу разных свойств, но это не меняет. У меня такое ощущение, что это как-то связано с тем, что он находится внутри h1, но это все, что у меня есть. Любая помощь приветствуется, я новичок.

Вот мой код

 <h1>K&C Transmission</h1>
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#contact">Contact</a>
  <a href="#services">Services</a>
  <a href="Javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

.topnav {
  background-color: darkblue;
  overflow:hidden;
  border:6px solid black;
  margin-top:0px;
}
.topnav a {
  float:left;
  color:yellow;
  text-align:center;
  padding: 14px 20px;
  text-decoration:none;
  font-size:17px;
}
h1 {
  text-align:inherit;
  background-image: url("https://s9.postimg.org/tdjelhj1r/IMG_0090.jpg");
  height:280px;
  width:100%;
  margin:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  font-size:50px;
  position:relative;
  top:0px;
  margin-bottom:0px;
  vertical-align: top;


}

И вот jsfiddle:

введите описание ссылки здесь

- Опять же, проблема не существует на jsfiddle. Я не знаю, почему это происходит на Атоме.

-2
K. Quiterio 28 Фев 2018 в 08:07

4 ответа

Лучший ответ

Попробуй это.

 * {
   box-sizing: border-box;
 }
 h1 {
  margin : 0;
  padding: 0;
 }
0
myfavs.in 28 Фев 2018 в 05:27

Нам нужен css, примененный к вашему сайту, чтобы получить точный ответ, но вы должны установить следующие опции в вашем css

body{
  margin: 0;
  padding: 0;
}

h1{
  margin: 0;
  padding: 0;
}
0
Rando 28 Фев 2018 в 05:09
<h1>K&C Transmission</h1>
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#contact">Contact</a>
  <a href="#services">Services</a>
  <a href="Javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<style>
.topnav {
  background-color: darkblue;
  overflow:hidden;
  border:6px solid black;
  margin-top:0px;
}
.topnav a {
  float:left;
  color:yellow;
  text-align:center;
  padding: 14px 20px;
  text-decoration:none;
  font-size:17px;
}
h1 {
  text-align:inherit;
  background-image: url("/Volumes/BEAR/KandC Transmission/Media/IMG_0090.jpg");
  width:100%;
  margin:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  font-size:50px;
  position:relative;
  top:0px;
  margin-bottom:0px;
  vertical-align: top;


}
</style>

Попробуйте этот код, он будет работать. Я удалил height из тега h1.

-1
Ms.KV 28 Фев 2018 в 06:04

Да, это должно быть просто изображение в теге. Изображение будет отображаться в верхней части страницы.

Кроме того, нет смысла снова отображать H1 / Title на изображении, так как изображение достаточно наглядно.

Обязательно отдайте себе должное за использование качественного изображения, поскольку вы новичок.

0
Jayashree Gatade 28 Фев 2018 в 06:30