That picture that I use as backgrounds

#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>

This is what happens:

I would like to have a clean one lane.

  • one
    If you really need help, then take the trouble to at least describe your problem - Cheg
  • I'm a little new to this business, and it turns out I want to make a menu, but I can't make it so that the background image is without the top and bottom bars - BraFik
  • I apologize for writing so clumsily ( - BraFik
  • one
    I edited the question. Now add to the code your images that you use as backgrounds in CSS - Cheg
  • Am I correct? - BraFik

1 answer 1

Without the upper and lower bands, it makes no sense to use a picture (unless of course this is not for some super ancient browsers), so it’s better to do it through a gradient:

 #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>