background image stops repeating leaving a blank area in my top page banner
I have a top banner comprised using three images. One to the left, one to the right and a third image that should tile between the left and right images.
In IE it works fine, in Firefox it stops tiling and leaves a small white area when viewed on very wide screens (mine is 1920 x 1080). It tiles fine on smaller width screens.
The website is www.shophutchinsonmn.com
Chosen solution
The cell with the gap does not have a background image. To confirm, try this:
(1) Display the Web Console above the page by pressing Ctrl+Shift+k
(2) Add borders to the table cells by pasting this code and pressing Enter:
document.querySelector("table").setAttribute("border","1");
(3) Resize the window between 1400 and 1450 to open/close the gap
(Note: viewed on a 1600x1050 monitor)
Read this answer in context 👍 0All Replies (4)
Any particular reason for the non-breaking space added to the middle image?
<td width="64%"align="right" valign="top" background="http://www.shophutchinsonmn.com/template/default/images/banner-background.gif"> </td>
Not that I am aware of, that is just the way it was set up in the template.
Chosen Solution
The cell with the gap does not have a background image. To confirm, try this:
(1) Display the Web Console above the page by pressing Ctrl+Shift+k
(2) Add borders to the table cells by pasting this code and pressing Enter:
document.querySelector("table").setAttribute("border","1");
(3) Resize the window between 1400 and 1450 to open/close the gap
(Note: viewed on a 1600x1050 monitor)
Modified by jscher2000 - Support Volunteer
Well that does the trick, I thought the gap was in the center cell . . . turns out it is in the right cell. Added the background image and the problem appears to be solved.
Thanks