d3f0b85414443b18f60a04da085238a558c8cd89
markd
  Fri Aug 21 13:52:08 2026 -0700
floretStyle.css: make the background actually apply. refs #38159

The file had never worked.  Four separate faults, each enough on its own to
stop the background from showing:

- The value was a bare URL, "background: http://genome-test.soe.ucsc.edu/...",
with no url() wrapper, so the declaration was invalid and dropped.
- The host was hardcoded to genome-test, wrong on dev, beta, the RR and every
mirror.  Now site-relative, and floret.jpg is at htdocs/images/floret.jpg.
- The selector was a bare BODY, specificity 0,0,1.  HGStyle.css has body.cgi
and body.hgTracks rules at 0,1,1, so it lost the cascade regardless of
source order.  Now body.cgi, which ties both and wins on order.
- background-image alone left HGStyle's body.hgTracks longhands in place,
repeat-x / left bottom / fixed, so the image drew as a band across the
bottom rather than tiling.  Now the background shorthand.

Also scope the TH rule with :not(:empty).  web.c emits <TH HEIGHT=10></TH> as a
vertical spacer in three places, webNewSectionHeaderEnd and two siblings, plus
once in cgilib/gvUi.c.  Coloring every TH turned those blank cells into visible
boxes, one next to the Submit button on the configure page.  On that page 2 of
the 14 TH elements are the empty spacers and 12 are real group headers, so
:not(:empty) hits exactly the ones that should be colored.

Verified with headless Chrome: background tiles, populated TH keeps its color,
empty spacer TH draws nothing.

diff --git src/hg/htdocs/style/floretStyle.css src/hg/htdocs/style/floretStyle.css
index 49628970905..7569285b1d4 100644
--- src/hg/htdocs/style/floretStyle.css
+++ src/hg/htdocs/style/floretStyle.css
@@ -1,5 +1,13 @@
-TH {background-color: #9999cc}
-BODY {background: http://genome-test.soe.ucsc.edu/images/floret.jpg;  color: black}
+/* :not(:empty) so the empty <TH HEIGHT=10> spacer cells that hgTracks emits for
+ * layout do not turn into visible colored boxes. */
+TH:not(:empty) {background-color: #9999cc}
+/* Two things this rule has to work around, both from HGStyle.css.  body.cgi rather
+ * than a bare BODY, because HGStyle's body.cgi and body.hgTracks rules outrank an
+ * element selector.  And the background shorthand rather than background-image,
+ * because body.hgTracks sets repeat-x / left bottom / fixed, and those longhands
+ * survive a background-image rule, leaving a band across the bottom of the page
+ * instead of a tiled background. */
+body.cgi {background: url("/images/floret.jpg") repeat scroll left top; color: black}
 A:link {color: #19197; text-decoration: none}
 A:active {color #FE0000}
 A:visited {color: #551A8A}