[object Object]

← back to Wallco Ai

hero: room slides use background-size:cover (full-width) instead of contain

09c554e023c81010d68af951f35ba5be1820809b · 2026-05-28 12:22:53 -0700 · Steve Abrams

Round 2 of the room-hero work. The earlier 'contain' decision (centered square,
--hero-frame letterbox) made the hero look like a tiny center image with huge
cream bars on either side — Steve 2026-05-28: 'where are the hero room
images?'.

The 2048² Lanczos source carries enough resolution that 'cover' on a 1440×648
hero strip downsamples ~1.4× — still crisp. background-position center 35%
keeps the wallpaper-on-wall band centered while cropping ceiling above + floor
below, which is what you want on a wide hero anyway.

Verified visually via playwright @ 1440×900 (age-gate dismissed): hero strip
filled edge-to-edge, wallpaper pattern + furniture band centered, dot
navigator + 'wallco.ai' wordmark properly placed underneath.

Files touched

Diff

commit 09c554e023c81010d68af951f35ba5be1820809b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu May 28 12:22:53 2026 -0700

    hero: room slides use background-size:cover (full-width) instead of contain
    
    Round 2 of the room-hero work. The earlier 'contain' decision (centered square,
    --hero-frame letterbox) made the hero look like a tiny center image with huge
    cream bars on either side — Steve 2026-05-28: 'where are the hero room
    images?'.
    
    The 2048² Lanczos source carries enough resolution that 'cover' on a 1440×648
    hero strip downsamples ~1.4× — still crisp. background-position center 35%
    keeps the wallpaper-on-wall band centered while cropping ceiling above + floor
    below, which is what you want on a wide hero anyway.
    
    Verified visually via playwright @ 1440×900 (age-gate dismissed): hero strip
    filled edge-to-edge, wallpaper pattern + furniture band centered, dot
    navigator + 'wallco.ai' wordmark properly placed underneath.
---
 data/cactus-decisions.jsonl | 32 ++++++++++++++++++++++++++++++++
 public/css/site.css         | 18 +++++++++++-------
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/data/cactus-decisions.jsonl b/data/cactus-decisions.jsonl
index b7a84dd..e3199e9 100644
--- a/data/cactus-decisions.jsonl
+++ b/data/cactus-decisions.jsonl
@@ -9505,3 +9505,35 @@
 {"ts":"2026-05-28T19:19:40.747Z","id":25476,"action":"bad"}
 {"ts":"2026-05-28T19:19:40.877Z","id":27424,"action":"bad"}
 {"ts":"2026-05-28T19:19:40.998Z","id":25344,"action":"bad"}
+{"ts":"2026-05-28T19:21:34.211Z","id":3526,"action":"bad"}
+{"ts":"2026-05-28T19:21:34.308Z","id":3510,"action":"bad"}
+{"ts":"2026-05-28T19:21:34.387Z","id":3529,"action":"bad"}
+{"ts":"2026-05-28T19:21:34.457Z","id":3511,"action":"bad"}
+{"ts":"2026-05-28T19:21:34.542Z","id":3530,"action":"bad"}
+{"ts":"2026-05-28T19:21:34.649Z","id":3506,"action":"bad"}
+{"ts":"2026-05-28T19:21:34.770Z","id":3512,"action":"bad"}
+{"ts":"2026-05-28T19:21:34.901Z","id":3525,"action":"bad"}
+{"ts":"2026-05-28T19:21:35.023Z","id":3505,"action":"bad"}
+{"ts":"2026-05-28T19:21:35.148Z","id":3523,"action":"bad"}
+{"ts":"2026-05-28T19:21:35.273Z","id":3524,"action":"bad"}
+{"ts":"2026-05-28T19:21:35.426Z","id":3577,"action":"bad"}
+{"ts":"2026-05-28T19:21:35.549Z","id":3494,"action":"bad"}
+{"ts":"2026-05-28T19:21:35.672Z","id":3497,"action":"bad"}
+{"ts":"2026-05-28T19:21:35.793Z","id":3498,"action":"bad"}
+{"ts":"2026-05-28T19:21:35.903Z","id":3575,"action":"bad"}
+{"ts":"2026-05-28T19:21:36.019Z","id":3507,"action":"bad"}
+{"ts":"2026-05-28T19:21:36.149Z","id":3500,"action":"bad"}
+{"ts":"2026-05-28T19:21:36.289Z","id":3501,"action":"bad"}
+{"ts":"2026-05-28T19:21:36.391Z","id":3493,"action":"bad"}
+{"ts":"2026-05-28T19:21:36.524Z","id":3504,"action":"bad"}
+{"ts":"2026-05-28T19:21:36.644Z","id":3499,"action":"bad"}
+{"ts":"2026-05-28T19:21:36.762Z","id":3572,"action":"bad"}
+{"ts":"2026-05-28T19:21:36.890Z","id":3492,"action":"bad"}
+{"ts":"2026-05-28T19:21:37.024Z","id":3503,"action":"bad"}
+{"ts":"2026-05-28T19:21:37.149Z","id":3519,"action":"bad"}
+{"ts":"2026-05-28T19:21:37.248Z","id":3522,"action":"bad"}
+{"ts":"2026-05-28T19:21:37.330Z","id":3491,"action":"bad"}
+{"ts":"2026-05-28T19:21:37.405Z","id":3502,"action":"bad"}
+{"ts":"2026-05-28T19:21:37.501Z","id":3514,"action":"bad"}
+{"ts":"2026-05-28T19:21:37.583Z","id":3531,"action":"bad"}
+{"ts":"2026-05-28T19:21:37.681Z","id":3571,"action":"bad"}
diff --git a/public/css/site.css b/public/css/site.css
index 40d90e9..00320bb 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -225,14 +225,18 @@ main { padding-top: 73px; }
   transition: opacity 1.2s ease;
 }
 .hero-slide.active { opacity: 1; }
-/* Room slides — the source PNG is 1024² (square scene); on a wide hero strip
-   'cover' crops out top/bottom and softens the room. 'contain' shows the whole
-   render at full scale (Steve 2026-05-28: "must be at full scale so it is
-   clean and clear"). --hero-frame is set per-slide from the design's
-   dominant_hex so the letterbox reads as intentional framing, not a gap. */
+/* Room slides — source PNG is 2048² (Lanczos-upscaled from upstream 1024²;
+   scripts/upscale-room-heroes.py). On a wide hero strip 'contain' leaves big
+   frame bars on either side and a tiny center image. Steve 2026-05-28 round
+   2: "where are the hero room images?" — they were boxed in the middle. Switch
+   to 'cover' with center-30%-from-top focus so the wall + furniture band fills
+   the strip (the upstream renderer centers the wallpaper wall at ~30-45% from
+   the top, ceiling above + floor below get cropped — which is what you want
+   on a wide hero anyway). The 2048² source carries the resolution; cover at
+   648px tall ≈ 1.4× downscale = crisp. */
 .hero-slide.is-room {
-  background-size: contain;
-  background-color: var(--hero-frame, #1a1612);
+  background-size: cover;
+  background-position: center 35%;
 }
 
 .hero-controls {

← 88d80d7 hero: 2048² Lanczos-upscaled room mockups; heroImageUrl pref  ·  back to Wallco Ai  ·  /me/saved: add admin view-mode toggle pill (admin/live) — in a2a7d70 →