1

Та картинка которую использую в качестве фонов

#hero {
  background: #e8c04f url(images/bg-tile-yellow.gif) top left repeat;
}

#hero .large-ribbon {
  text-indent: -99999px;
}

#hero .container {}

#hero .container img {
  position: relative;
  right: -450px;
}


/* Меню */

#center-forms {
  background: url(https://i.sstatic.net/Uklvv.jpg) top left repeat;
}

#center-forms nav {
  text-align: left;
  position: relative;
  top: -18px;
}

#center-forms nav ul {
  margin-top: 10px;
  padding: 0;
  list-style: none;
  display: block;
}

#center-forms nav ul li {
  display: inline-block;
  padding: 0 20px;
}

#center-forms nav ul li a:link {
  text-decoration: none;
}

#center-forms nav ul li a:hover {
  color: #fff;
}

#put {
  position: absolute;
}

#put form {
  position: relative;
  top: -175px;
  left: 850px;
}
<div id="center-forms">
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Отзывы</a></li>
        <li><a href="#">Оплата и доставка</a></li>
        <li><a href="#">Скидки</a></li>
        <li><a href="#">Другие товары</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
  </div>
  <!---- Конец контейнера --->
</div>

<div class="container">
  <div id="put">
    <form>
      <p><input type="search" name="q" placeholder="Поиск по сайту...">
        <input type="submit" value="Найти"></p>
    </form>
  </div>
  <!-- end put -->
</div>

Вот что получается:

Я бы хотел, чтобы получалась чисто одна полоса.

5
  • 1
    Если уж действительно нужна помощь, то потрудитесь хотя бы вашу проблему описать
    – Cheg
    Commented 25 сент. 2017 в 6:14
  • Я немного новичок в этом деле, и получается хочу сделать меню, но у меня не получается его сделать так чтобы изображение заднего фона, было без верхней и нижней полосы
    – BraFik
    Commented 25 сент. 2017 в 6:19
  • Извеняюсь что так коряво пишу(
    – BraFik
    Commented 25 сент. 2017 в 6:19
  • 1
    Я вопрос подредактировал. Добавьте теперь в код ваши картинки, которые вы используете в качестве фонов в CSS
    – Cheg
    Commented 25 сент. 2017 в 6:24
  • Правильно я добавил?
    – BraFik
    Commented 25 сент. 2017 в 6:28

1 ответ 1

0

Без верхней и нижней полосы смысл использовать картинку отпадает (если конечно это не под какие-то супер древние браузеры), так что лучше через градиент это сделать:

#hero {
  background: #e8c04f url(images/bg-tile-yellow.gif) top left repeat;
}

#hero .large-ribbon {
  text-indent: -99999px;
}

#hero .container {}

#hero .container img {
  position: relative;
  right: -450px;
}


/* Меню */

#center-forms {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9bb7e+0,f4b25e+50,f69642+50,ee8512+100 */
  background: rgb(249,187,126); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(249,187,126,1) 0%, rgba(244,178,94,1) 50%, rgba(246,150,66,1) 50%, rgba(238,133,18,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(249,187,126,1) 0%,rgba(244,178,94,1) 50%,rgba(246,150,66,1) 50%,rgba(238,133,18,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(249,187,126,1) 0%,rgba(244,178,94,1) 50%,rgba(246,150,66,1) 50%,rgba(238,133,18,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9bb7e', endColorstr='#ee8512',GradientType=0 ); /* IE6-9 */
}

#center-forms nav {
  text-align: left;
  position: relative;
}

#center-forms nav ul {
  padding: 0;
  list-style: none;
  display: block;
  margin: 0;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
}

#center-forms nav ul li {
  display: inline-block;
  padding: 0 20px;
}

#center-forms nav ul li a:link {
  text-decoration: none;
}

#center-forms nav ul li a:hover {
  color: #fff;
}

#put {
  position: absolute;
}

#put form {
  position: relative;
  top: -175px;
  left: 850px;
}
<div id="center-forms">
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Отзывы</a></li>
        <li><a href="#">Оплата и доставка</a></li>
        <li><a href="#">Скидки</a></li>
        <li><a href="#">Другие товары</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
  </div>
  <!---- Конец контейнера --->
</div>

<div class="container">
  <div id="put">
    <form>
      <p><input type="search" name="q" placeholder="Поиск по сайту...">
        <input type="submit" value="Найти"></p>
    </form>
  </div>
  <!-- end put -->
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.