Изображение заголовка повторяется с фоном: cover ;. Как я могу это исправить? - PullRequest
Новая
       72

Изображение заголовка повторяется с фоном: cover ;. Как я могу это исправить?

0 голосов
/ 06 марта 2020

Моя цель - создать веб-сайт для пекарни, отсюда и название, и изображение, и сайт не будет опубликован ни на каких серверах. Я хотел бы иметь изображение в верхней части моей страницы под меню навигации, которое сохраняет тот же аспект rat ios при изменении размера окна, но для этого не требуется указание высоты, иначе изображение будет обрезаться при Я увеличиваю окно, а также повторяю по горизонтали. Вот код, который у меня есть: 

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
.header-img {
height: 370px;
width: 100%;
  background-repeat: no-repeat;
  background: url('https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg');
  background-size: contain;
}
body {
        background-color:white;
        margin: 0;
        padding: 0;
        text-align:center;
}          
.sticky + .content {
  padding-top: 60px;
}
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
}
.li {
  float: left ;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.liname {
 float: left;
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 26px
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
body {
    margin: 0;
    text-align: center;
}
<link rel="icon" href="https://cakesreanimated.com/wp-content/uploads/2020/01/favicon-cakes-reanimated.png">

</br>
<div id="navbar">
<nav>
<ul class="menu">
<li class="liname">
<a>Bakes n' Cakes</a>
</li>
<li class="li">
<a href ="bakerysite.html">Home</a>
</li>
<li class="li">
<a href ="about.html">About</a>
</li>
<li class="li">
<a href ="prices.html">Prices</a>
</li>
<li class="li">
<a href ="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<main>
<div class="header-img"  id=#header></div>
</main>
</br>

1 Ответ

0 голосов
/ 06 марта 2020

Вам необходимо установить размер фона для покрытия в вашем css, как показано ниже.

Вы можете изменить положение изображения с помощью свойства background-position.

Далее информация:

https://www.w3schools.com/cssref/css3_pr_background-size.asp https://www.w3schools.com/cssref/pr_background-position.asp

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
.header-img {
height: 370px;
width: 100%;
  background-repeat: no-repeat;
  background: url('https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg');
  background-size: cover;
}
body {
        background-color:white;
        margin: 0;
        padding: 0;
        text-align:center;
}          
.sticky + .content {
  padding-top: 60px;
}
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
}
.li {
  float: left ;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.liname {
 float: left;
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 26px
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
body {
    margin: 0;
    text-align: center;
}
<link rel="icon" href="https://cakesreanimated.com/wp-content/uploads/2020/01/favicon-cakes-reanimated.png">

</br>
<div id="navbar">
<nav>
<ul class="menu">
<li class="liname">
<a>Bakes n' Cakes</a>
</li>
<li class="li">
<a href ="bakerysite.html">Home</a>
</li>
<li class="li">
<a href ="about.html">About</a>
</li>
<li class="li">
<a href ="prices.html">Prices</a>
</li>
<li class="li">
<a href ="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<main>
<div class="header-img"  id=#header></div>
</main>
</br>

Чтобы сохранить соотношение сторон при ширине: 100%, используйте обычное изображение внутри вашего .header-img div и исправьте css следующим образом : 

.header-img {
  width: 100%;
}

.header-img img {
  width:100%;
  height:auto;
}

Извините, если я не понял.

...