Предотвратить фон переполнения без переполнения: скрытый

Question

В my site, я в настоящее время с помощью overflow: hidden на #header, чтобы предотвратить переполнение фона, который принадлежит к одному из своих детей (#input с SVG displey ошибки взломан #backgroundfix).

Однако я обнаружил, что должен оставить значение переполнения до значения по умолчанию, поскольку оно мешает чему-то еще на моем сайте.

Как отключить или предотвратить переполнение фона #input без использования overflow? Надеемся, что это поддерживается широко.

HTML:

<header id="header" role="banner"> 
    <section id="logo"></section><section id="input"> 
     <form method="get"> 
      <input id="searchInput" type="text" name="search" autocomplete="off" autofocus x-webkit-speech value="Leonirdo" onfocus="this.value = this.value;" /> 
     </form> 
    </section> 
    <div id="backgroundFix"></div> 
</header> 

Answer 1

Я думаю, вы должны избавиться от хака для плохих SVG отображать и исправлять SVG. Решение вопроса Background image tiles have gap between them when using SVG image. How to solve in Chrome? должно помочь вам в этом.

Подводя итог тому, что он говорит: Проблема, вероятно, является ошибкой округления при вычислении размеров определенных частей изображения. Белой полосы нет, но она появляется при рендеринге на целые пиксели. Закруглите координаты внутри целых чисел, а белая полоса должна исчезнуть.

Избавиться от overflow, избавиться от #backgroundfix и использовать отремонтированный SVG. Тогда это должно сработать.

Answer 2

Избавьтесь от backgroundFix DIV и на другой с фоном добавить эти правила CSS

background-position: 2px; 
left: 20%; 
top: -200px; 
background-size: cover;