Почему я не могу настроить фоновое изображение? - PullRequest
Новая
       3

Почему я не могу настроить фоновое изображение?

0 голосов
/ 05 мая 2020

На самом деле я застрял в разработке адаптивного веб-сайта с двумя столбцами. Я не могу заставить мое фоновое изображение реагировать, и я не знаю, верна ли моя структура. Мой первый столбец называется sidebar, а второй - main-content.

HTML: 

<body>
    <section class="sidebar">
        <nav>
            <div id="logo" class="container-fluid">
                <a class="navbar-brand" href="#"><h1>Coffee Mug</h1></a>
            </div>
            <div id="navbar" class="container-fluid">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Active</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
        </nav>
    </section>
    <section class="main-content">
        <header class="container-fluid">
        </header>
    </section>
</body>

CSS: 

 .sidebar
{
    position: fixed;
    float: left;
    width: 25%;
    height: 100% !important;
    background-color: #93AF79 !important;
}

#logo
{
    margin: 80px 100px;
}

#navbar ul li
{
    text-align: center;
}

#main-content
{
    width: 85%;
}

header
{
    background: url("Coffee_mug2.png") no-repeat;
    background-size: cover;
    /* max-width: 100%; */
    height: 600px;
}

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 05 мая 2020

Похоже, это неправильное использование сокращенного свойства фона , следующее изменение должно сделать это за вас: 

header{
    background: no-repeat url("https://sd-1.archive-host.com/membres/images/210138792344645661/Coffee_mug2.png") ;
    background-size: contain;
    height: 600px;
}
0 голосов
/ 05 мая 2020

О, так вы имеете в виду это?

enter image description here

body {
  margin: 0;
  padding: 0;
}

.sidebar {
  position: fixed;
  float: left;
  width: 25%;
  height: 100% !important;
  background-color: #93AF79 !important;
}

#logo {
  margin: 80px 100px;
}

#navbar ul li {
  text-align: center;
}

#main-content {
  width: 75%;
}

header {
  background: url("https://sd-1.archive-host.com/membres/images/210138792344645661/Coffee_mug2.png") no-repeat;
  background-size: cover;
  background-position: top center;
  height: 600px;
}

main {
  height: 1000px;
}
<section class="sidebar">
  <nav>
    <div id="logo" class="container-fluid">
      <a class="navbar-brand" href="#">
        <h1>Coffee Mug</h1>
      </a>
    </div>
    <div id="navbar" class="container-fluid">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>
</section>
<section class="main-content">
  <header class="container-fluid"></header>
  <main>content content content</main>
</section>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...