{"id":60,"date":"2026-10-05T13:21:55","date_gmt":"2026-10-05T05:21:55","guid":{"rendered":"https:\/\/hoho.live\/luda\/index.php\/2026\/10\/05\/how-a-palace-landscape-is-composed-for-a-fixed-blog-background\/"},"modified":"2026-10-05T22:05:11","modified_gmt":"2026-10-05T14:05:11","slug":"how-a-palace-landscape-is-composed-for-a-fixed-blog-background","status":"publish","type":"post","link":"https:\/\/hoho.live\/luda\/index.php\/2026\/10\/05\/how-a-palace-landscape-is-composed-for-a-fixed-blog-background\/","title":{"rendered":"How a palace landscape is composed for my music blog background"},"content":{"rendered":"\n

Short answer:<\/strong> The picture is pinned to the browser window with background-attachment: fixed<\/code><\/strong>, so the opaque header covers its top and the white article cards cover its middle. The page shows a strip under the bar and the two side margins. Compose that strip in \u77f3\u9752<\/strong> (azurite), \u77f3\u7da0<\/strong> (malachite), and gold line, the mineral set of a \u9752\u7da0\u91d1\u78a7<\/strong> gongbi painting, matched to the header’s CSS rather than to a photograph or one named scroll. Halls sit on the left and the right. The center is quiet water. An image generator draws the file from that written layout.<\/p>\n\n\n

\n\n

What the page actually shows<\/strong><\/h4>\n\n

The background is background-size: cover<\/code><\/strong>, anchored at center<\/code><\/strong>, and fixed to the window. Scroll the posts and the picture stays put. The header is an opaque bar, so it covers the top of the file. The articles are white cards across the middle.<\/p>\n\n\n

On a wide screen the picture that remains is the band between the header and the cards, plus a narrow margin at each side. A hall painted in the middle of the file sits behind a card. A sky painted only at the top of a tall scroll sits behind the header. The useful region is the upper band of a wide frame.<\/p>\n\n\n

\n\n

What the picture can and cannot carry<\/strong><\/h4>\n\n

The bar has already chosen the pigments. A horizontal gradient runs from #163e62<\/code><\/strong> at the edges to #1a6a56<\/code><\/strong> in the middle. The site name is #f6e2a8<\/code><\/strong>. A gold line, rgba(232, 196, 106, 0.8)<\/code><\/strong>, sits on the bottom edge of the bar. Those three colors are the azurite, the malachite, and the gold of a \u91d1\u78a7 painting.<\/p>\n\n\n

The picture can use those pigments and nothing else that fights them. Mountains are flat mineral blue and green. Gold is a line. The top of the file stays close to #163e62<\/code>, so the bottom of the header and the sky under it are one surface.<\/p>\n\n\n

It cannot carry a building inside the bar. The bar is a few dozen pixels tall. A roof drawn there reads as a curve. The building belongs in the background, where a whole slope is visible. The bar can keep a hollow key-fret<\/strong> (\u56de\u7d0b) in the side margins, in gold, clear of the title.<\/p>\n\n\n

\n\n

Where the colors and the drawing come from<\/strong><\/h4>\n\n

Nothing in the file is sampled from a photograph, and nothing is traced from one named painting. The brief names two references.<\/p>\n\n\n

The first is the header already on the page. Those three CSS colors are the whole palette. In architectural color that set is \u91d1\u78a7<\/strong>: \u77f3\u9752<\/strong>, \u77f3\u7da0<\/strong>, and gold line (\u6ce5\u91d1). The sky is told to stay close to #163e62<\/code> across the top fifth of the frame, so the part the bar covers and the part that shows are the same pigment.<\/p>\n\n\n

The second is the painting convention those mineral names belong to. \u9752\u7da0<\/strong> is the blue-green landscape built from azurite and malachite. \u5de5\u7b46<\/strong> (gongbi) is the manner: flat areas of mineral color, fine outlines, spacious and still, the kind associated with Song-dynasty \u9752\u7da0. Adding gold line to that pair is what makes it \u9752\u7da0\u91d1\u78a7<\/strong>. The brief names that convention. It does not attach a museum image, a scan, or a style model. It also names what the convention rules out on this page: a pastel sunrise, a peach or pink sky, heavy white mist, photorealism, and any text, seal, watermark, or figure.<\/p>\n\n\n

The file is not drawn tile by tile. The layout is written down, and an image generator draws a 16:9 frame, 1280 by 720, from that text:<\/p>\n\n\n

    \n
  • The upper band is a deep azurite sky, with a few long clouds edged in thin gold.<\/li>\n
  • On the far left and the far right, large halls stand beside the water. Eaves turn up. Walls are malachite, in shadow. Gold roof ridges rise into the sky band, so the roofs enter the strip under the header.<\/li>\n
  • The center stays quieter: layered distant mountains in flat mineral blue and green, then a wide deep blue-green river with a few thin gold ripples.<\/li>\n
  • Gold is only a fine line, on roof ridges, cloud rims, and the water.<\/li>\n<\/ul>\n\n\n

    The roofs in the returned file carry more gold than a hairline. They still read as ridges, and they sit at the sides, away from the gold type in the bar, so the file was kept.<\/p>\n\n\n

    \n\n

    The working layout<\/strong><\/h4>\n\n
      \n
    1. Match the sky to the header’s edge color, so the seam disappears.<\/li>\n
    2. Put one hall on the far left and one on the far right, roofs high enough to enter the strip under the bar.<\/li>\n
    3. Keep the center as distant mountains and a wide river. That is where the cards sit.<\/li>\n
    4. Leave background-position<\/code> at center<\/code>. A symmetrical picture does not need a gutter crop.<\/li>\n
    5. Keep the white wash light, about 12% at the top and 20% at the bottom. The cards are already white.<\/li>\n<\/ol>\n\n\n
      \"Two<\/figure>\n\n\n
      \n\n

      Approaches that look simpler and fail<\/strong><\/h4>\n\n
      \n\n\n\n\n\n\n\n\n
      Approach<\/th>\nWhy it fails if the header is opaque and the cards cover the center<\/th>\n<\/tr>\n<\/thead>\n
      A pale sunrise under a mineral header<\/td>\nPeach and mist do not meet azurite; the bar looks pasted on<\/td>\n<\/tr>\n
      A roof or tile drawing inside the header<\/td>\nAt the height of the bar the building collapses into a curve or a cloud<\/td>\n<\/tr>\n
      background-position<\/code> shifted so one hall sits in a gutter<\/td>\nOne side is framed and the other leaves the window<\/td>\n<\/tr>\n
      A heavy white wash, near 40% to 50%<\/td>\nMineral blue-green goes gray and the seam under the header opens again<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n\n\n

      A translucent header, or a page with no center cards, is where a centered painting belongs. It is the wrong tool once the bar is solid and the articles cover the middle.<\/p>\n\n\n

      \n\n

      When you can drop this layout<\/strong><\/h4>\n\n

      You can paint the middle of the file, and ignore the header’s pigments, if you give up one of the constraints:<\/p>\n\n\n

        \n
      • The header lets the picture through, so the top of the file is visible<\/li>\n
      • The center of the page is not covered by cards<\/li>\n
      • The background scrolls with the document, so the composition is a page rather than a window<\/li>\n<\/ul>\n\n\n

        Those are layout changes, not a different crop of the same file. Until one of them is true, keep the halls in the margins and the sky in the header’s color.<\/p>\n\n\n

        \n\n

        Why this stays published<\/strong><\/h4>\n\n

        We hit this fitting a \u91d1\u78a7 header over a blog background fixed to the window, and the same crop shows up on any page that paints the viewport and then covers it. An opaque header and centered cards leave a strip and two margins. Compose the landscape for that region, in the header’s pigments.<\/strong><\/p>\n\n\n

        \u672c\u6587\u7531 HoHo \u8207 AI \u5354\u4f5c\u6574\u7406\uff0c\u6700\u5f8c\u66f4\u65b0\u65bc 2026 \u5e74 10 \u6708 5 \u65e5\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

        Short answer: The picture is pinned to the browser window with background-attachment: fixed, so the opaque header covers its top and the white article cards cover its middle. The page shows a strip under the bar and the two side margins. Compose that strip in \u77f3\u9752 (azurite), \u77f3\u7da0 (malachite),…<\/p>\n","protected":false},"author":2,"featured_media":59,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-60","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/hoho.live\/luda\/index.php\/wp-json\/wp\/v2\/posts\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hoho.live\/luda\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hoho.live\/luda\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hoho.live\/luda\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hoho.live\/luda\/index.php\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":3,"href":"https:\/\/hoho.live\/luda\/index.php\/wp-json\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":63,"href":"https:\/\/hoho.live\/luda\/index.php\/wp-json\/wp\/v2\/posts\/60\/revisions\/63"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hoho.live\/luda\/index.php\/wp-json\/wp\/v2\/media\/59"}],"wp:attachment":[{"href":"https:\/\/hoho.live\/luda\/index.php\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hoho.live\/luda\/index.php\/wp-json\/wp\/v2\/categories?post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hoho.live\/luda\/index.php\/wp-json\/wp\/v2\/tags?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}