Umemura Farm Website – Devlog #10: Working on Visual Improvements with Tailwind CSS

Repeating an Image Horizontally with Responsive Behavior

Today, my first task was to create a horizontally repeated image pattern (bg-repeat-x) that adapts based on the viewport size.

What I wanted:

Viewport	Behavior
Mobile (≤767px)	Show the image only once, centered, with no scaling
Tablet and above	Repeat the image 3 times at its natural size, centered

Tailwind implementation:

<div className="flex justify-center">
  <div
    className="
      w-[calc(60px*3)]  /* 3x image width */
      h-[60px]
      bg-[url('/assets/images/border2.png')]
      bg-repeat-x
      bg-left
      bg-[length:auto_100%]
    "
    aria-hidden="true"
  />
</div>

On mobile, it displays a single centered image.
On wider screens, the image repeats smoothly across the width.

Overlapping Text on an Image Using Tailwind + Next.js Next, I wanted to make some text appear partially over an image. A clean visual overlap effect, commonly used in hero sections.

Initial Approach & Issues
I started with a simple z-index strategy:

Added z-10 to the text element

Tried lowering the image's z-index

But the result was wrong, the text still stayed behind the image.

Why?

Text container was missing relative positioning

Image didn’t have any z-index, so the stacking context wasn't clearly defined

Final Solution: Layered Structure
The correct solution was to separate the layers clearly:

The text for mobile and desktop were rendered differently

On desktop (md: and up), the text was absolutely positioned over the image

<section className="py-12 bg-white">
  <div className="container mx-auto px-4">
    <div className="max-w-4xl mx-auto space-y-10">

      {/* Mobile text (normal block layout) */}
      <div className="block md:hidden px-2">
        <h2 className="text-2xl font-bold text-gray-900 leading-[2.5rem] text-left">
          “Don’t you think thick asparagus is only available in Hokkaido?”
        </h2>
      </div>

      {/* Responsive image group */}
      <div className="flex flex-col md:flex-row gap-4">
        <img
          src="/assets/images/asparagus01.png"
          alt="Asparagus 1"
          className="w-full md:w-[40%] h-auto object-cover rounded shadow"
        />
        <img
          src="/assets/images/asparagus02.png"
          alt="Asparagus 2"
          className="w-full md:w-[60%] h-auto object-cover rounded shadow"
        />
      </div>

      {/* Desktop-only overlay text */}
      <div className="hidden md:block relative">
        <div className="absolute top-[-5.5rem] left-0 right-0 px-4 z-10 text-right">
          <h2 className="text-3xl font-bold text-gray-900 leading-[3.5rem] text-shadow-lg">
            “Don’t you think thick asparagus is only available in Hokkaido?”
            <br />
            Think again.
          </h2>
        </div>
      </div>

    </div>
  </div>
</section>