Background overflow prevention without overflow: hidden

Question

In my site , I am currently using overflow: hidden in #header to prevent overflowing the background belonging to one of his children ( #input , with SVG error cracked by #backgroundfix ).

However, I found that I should leave the overflow value to its default value, as it interferes with something else on my site.

How to disable or prevent #input background #input without using the overflow property? We hope that this will be supported widely.

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

I think you should get rid of the hack for poor SVG rendering and fix the SVG instead. Solution to the problem The background image palette has a gap between them when using an SVG image. How to solve the problem in Chrome? should help you with that.

To summarize what he says: The problem is probably a rounding error when calculating the sizes of certain parts of the image. There is no white bar, but it appears when rendering to whole pixels. Round the coordinates inside the integers and the white bar should disappear.

Get rid of overflow , get rid of #backgroundfix and use a refurbished SVG. Then it should work.

Answer 2

Get rid of your backgroundFix div, and on the other with the background add these css rules

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