Prevent background overflow without overflow:hidden

Question

In my site, I am currently using overflow: hidden on the #header to prevent the overflow of the background, which belongs to one of its children (#input, with SVG displey error hacked by #backgroundfix).

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

How can I cut off or prevent the overflow of the background of #input without using overflow property? Hopefully in a manner that is 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>

Please don't post links to live websites. These will be gone or modified in the future. Post the relevant code here and put it up on http://jsfiddle.net or http://jsbin.com — Olaf Dietsche, Feb 08 '14 at 01:41
Can you wrap the `#input` child in a new div and set that to overflow instead? Assuming you give it the same width and height as the `#header`. — badAdviceGuy, Feb 08 '14 at 01:42
@badAdviceGuy Is that bad advice? I would prefer not to change the html. But I just tried that and no, I can not. That still interferes with the rest of the site. — gomangomango, Feb 08 '14 at 01:46
What exactly is the problem with `overflow`? How does it interfere? — Palec, Feb 08 '14 at 03:39
@Palec it hides my header when I try to fix it using jQuery. — gomangomango, Feb 08 '14 at 03:55

score 2 · Answer 1 · answered Feb 08 '14 at 01:47

2

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

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

answered Feb 08 '14 at 01:47

dave

62,300
5
72
93

I can't remove the backgroundFix div. It fixes a bug in the svg background when it repeats when the viewport is wide enough. – gomangomango Feb 08 '14 at 01:52
3

@gomangomango I think dave knows that. This code should fix it also. The fix you used is really… clumsy. By the way, the problem should probably be fixed in the SVG itself. http://stackoverflow.com/q/11201248/2157640 – Palec Feb 08 '14 at 01:58
@Palec ah, okay. It works, but I'm getting this weird white, vertical stripe on the left. Here is an image: http://i.imgur.com/x5OjtZn.png – gomangomango Feb 08 '14 at 02:10
Dave, please look at my above, previous comment. – gomangomango Feb 08 '14 at 02:12
@gomangomango I guess I know both how it got there and what is the colorful stripe on its left side. The colorful one is rightmost part of another repetition of your image and the white stripe is the same as the one you are trying to solve on the right side. Maybe you should really fix the SVG as I suggested. – Palec Feb 08 '14 at 02:15
@Palec Oh, okay. I can try to fix the white-stripe, but the reason I came up with the #backgroundFix is because I couldn't edit the white stripe. I just opened the svg in illustrator and as I remember, there is no white-stripe in the svg image. I don't know where it is coming from. – gomangomango Feb 08 '14 at 02:37
1

@gomangomango For the third time: Read the question I linked to in my comment that got 3 upvotes in the meantime. The problem is probably round-off error when computing dimensions of certain parts of the image. There is no white stripe, but it pops up when rendering to whole pixels. Round the coordinates inside to whole numbers and the white stripe should vanish. – Palec Feb 08 '14 at 02:44
@gomangomango It’s OK. Maybe I was not clear enough that the link could really be a solution. Made that clear by posting it as an answer. – Palec Feb 08 '14 at 03:03
@Palec I fixed the height of the svg to a whole number and that didn't fix it, but some how removing the `background-position:2px;` did seem to fix the one of the left. However, when one expands the browser width, the image becomes way too big and doesn't fit. I think that is the `background-size:cover;`'s fault. – gomangomango Feb 08 '14 at 03:09
@gomangomango I am glad that my solution worked in the end. I edited my answer to include the final commend and deleted the comment. Just for the record: My solution was designed with original code in mind, not the one suggested by dave. More on that in [my answer](http://stackoverflow.com/a/21641273/2157640). Dave, sorry for spamming comments under your post. Next time I will post my own answer right away. – Palec Feb 08 '14 at 04:02

score 2 · Accepted Answer · edited May 23 '17 at 10:33

I think you should get rid of the hack for bad SVG display and fix the SVG instead. The solution to question Background image tiles have gap between them when using SVG image. How to solve in Chrome? should help you with that.

To summarize what it says: The problem is probably round-off error when computing dimensions of certain parts of the image. There is no white stripe, but it pops up when rendering to whole pixels. Round the coordinates inside to whole numbers and the white stripe should vanish.

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

Prevent background overflow without overflow:hidden

2 Answers2