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.stack.imgur.com/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
    25 сен 2017 в 6:14
  • Я немного новичок в этом деле, и получается хочу сделать меню, но у меня не получается его сделать так чтобы изображение заднего фона, было без верхней и нижней полосы
    – BraFik
    25 сен 2017 в 6:19
  • Извеняюсь что так коряво пишу(
    – BraFik
    25 сен 2017 в 6:19
  • 1
    Я вопрос подредактировал. Добавьте теперь в код ваши картинки, которые вы используете в качестве фонов в CSS
    – Cheg
    25 сен 2017 в 6:24
  • Правильно я добавил?
    – BraFik
    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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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