Tailwind CSS Academy · บทเรียน

ขนาด ตำแหน่ง และการทำซ้ำพื้นหลัง

ควบคุมการแสดงภาพพื้นหลังด้วยยูทิลิตี bg-cover, bg-contain, bg-center และ bg-no-repeat

บทเรียน 4 จาก 413 ขั้นตอน

ขนาด ตำแหน่ง และการทำซ้ำพื้นหลัง เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Tailwind CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

ภาพพื้นหลังใน Tailwind

Tailwind ไม่ได้ใช้ภาพพื้นหลังโดยตรง (เนื่องจากไม่สามารถแสดงที่อยู่ URL ของรูปภาพเป็นชื่อคลาสยูทิลิตีได้) แต่มีการควบคุมอย่างเต็มรูปแบบว่า ภาพพื้นหลังทำงานอย่างไร ทั้งขนาด ตำแหน่ง และลักษณะการทำซ้ำ โดยทั่วไปคุณจะกำหนดรูปภาพผ่านสไตล์ในบรรทัดหรือคลาส CSS แบบกำหนดเอง จากนั้นใช้ยูทิลิตีของ Tailwind เพื่อควบคุมคุณสมบัติการแสดงผล

<div
  style="background-image: url('hero.jpg');"
  class="w-full h-64 bg-cover bg-center bg-no-repeat">
</div>

bg-cover เทียบกับ bg-contain

bg-cover และ bg-contain เป็นยูทิลิตีขนาดพื้นหลังที่สำคัญที่สุดสองรายการ bg-cover จะปรับขนาดรูปภาพให้ใหญ่ที่สุดเท่าที่ทำได้เพื่อให้คลุมองค์ประกอบทั้งหมด โดยจะตัดบางส่วนออกหากจำเป็น — เหมาะสำหรับรูปภาพส่วนเปิดเรื่องและพื้นหลังที่แผ่เต็มพื้นที่ bg-contain จะปรับขนาดรูปภาพให้พอดีอยู่ภายในองค์ประกอบทั้งหมดโดยไม่ตัดส่วนใดออก — เหมาะสำหรับโลโก้และไอคอนที่ใช้เป็นพื้นหลัง

<!-- Full-bleed hero: bg-cover -->
<div style="background-image: url('hero.jpg');" class="h-96 bg-cover bg-center">
  <!-- Image fills the entire div, may be cropped -->
</div>

<!-- Logo background: bg-contain -->
<div style="background-image: url('logo.svg');" class="h-32 w-32 bg-contain bg-center bg-no-repeat">
  <!-- Image fits inside without cropping -->
</div>

bg-auto และขนาดแบบกำหนดเอง

bg-auto จะแสดงรูปภาพพื้นหลังด้วยขนาดพิกเซลตามธรรมชาติของรูปภาพ — โดยไม่ปรับขนาด ซึ่งมีประโยชน์เมื่อคุณต้องการพื้นผิวหรือลวดลายที่มีขนาดแม่นยำและไม่ผ่านการปรับขนาด สำหรับขนาดแบบกำหนดเองที่ไม่ใช่ cover หรือ contain ให้ใช้ค่าแบบกำหนดเอง: bg-[length:50%_auto] จะกำหนด background-size ให้มีความกว้าง 50% และความสูงเป็น auto ซึ่งมีประโยชน์สำหรับลวดลายพื้นหลังที่มีความกว้างครึ่งหนึ่ง

<!-- Pattern tile at natural size -->
<div style="background-image: url('pattern.png');" class="h-64 bg-auto bg-repeat">
</div>

<!-- Custom background size via arbitrary value -->
<div style="background-image: url('texture.jpg');" class="h-64 bg-[length:200px_200px] bg-repeat">
</div>

ยูทิลิตีตำแหน่งพื้นหลัง

ตำแหน่งพื้นหลังจะควบคุมว่า รูปภาพถูกยึดไว้ที่ใด ภายในคอนเทนเนอร์ Tailwind มีตำแหน่งให้เลือก 9 ตำแหน่งตามตารางขนาด 3x3 ได้แก่ bg-top, bg-bottom, bg-left, bg-right, bg-center และมุมทั้งสี่ ได้แก่ bg-top-left, bg-top-right, bg-bottom-left, bg-bottom-right เมื่อใช้ร่วมกับ bg-cover ตำแหน่งจะเป็นตัวกำหนดว่าส่วนใดของรูปภาพจะมองเห็นได้เมื่อมีการตัดบางส่วนออก

<!-- Show the top of the image (portrait person photo) -->
<div style="background-image: url('person.jpg');" class="h-48 bg-cover bg-top"></div>

<!-- Show the center (landscape scenery) -->
<div style="background-image: url('landscape.jpg');" class="h-48 bg-cover bg-center"></div>

<!-- Show the bottom (ground-level details) -->
<div style="background-image: url('detail.jpg');" class="h-48 bg-cover bg-bottom"></div>

ตำแหน่งพื้นหลังแบบกำหนดเอง

สำหรับตำแหน่งที่ไม่มีในค่าที่กำหนดไว้ 9 แบบ ให้ใช้ค่าแบบกำหนดเอง: bg-[center_25%] จะยึดรูปภาพไว้ที่กึ่งกลางแนวนอนและต่ำลงมาจากด้านบน 25% วิธีนี้มีประโยชน์สำหรับการจัดตำแหน่งจุดสำคัญอย่างละเอียด เช่น ใบหน้าในรูปภาพทีม ภายในการ์ดที่แสดงรูปภาพแบบถูกตัดส่วนออก ควรทดสอบลักษณะของรูปภาพที่ขนาดพื้นที่แสดงผลต่าง ๆ เสมอเมื่อใช้ตำแหน่งที่กำหนดอย่างละเอียด

<!-- Team member card: position face in frame -->
<div
  style="background-image: url('team-member.jpg');"
  class="w-32 h-32 rounded-full bg-cover bg-[center_20%]">
</div>

ยูทิลิตีการทำซ้ำพื้นหลัง

การทำซ้ำพื้นหลังจะควบคุมว่ารูปภาพจะเรียงซ้ำเพื่อเติมเต็มคอนเทนเนอร์หรือไม่ bg-repeat จะเรียงซ้ำทั้งสองทิศทาง (เป็นพฤติกรรมเริ่มต้น) bg-no-repeat จะแสดงรูปภาพเพียงครั้งเดียว bg-repeat-x จะเรียงซ้ำเฉพาะแนวนอน และ bg-repeat-y จะเรียงซ้ำเฉพาะแนวตั้ง bg-repeat-round และ bg-repeat-space มีตัวเลือกการเรียงซ้ำขั้นสูงที่ช่วยไม่ให้ส่วนของภาพที่เรียงซ้ำถูกตัดบริเวณขอบ

<!-- Tiled pattern background -->
<div style="background-image: url('dots.png');" class="h-64 bg-repeat">
</div>

<!-- Single decorative image in corner -->
<div style="background-image: url('corner-decor.svg');" class="h-64 bg-no-repeat bg-bottom-right">
  Main content here
</div>

การยึดพื้นหลัง: พารัลแลกซ์แบบตรึงอยู่กับที่

bg-fixed จะทำให้รูปภาพพื้นหลังยึดอยู่กับ พื้นที่แสดงผล แทนที่จะยึดอยู่กับองค์ประกอบ — เมื่อผู้ใช้เลื่อน เนื้อหาจะเคลื่อนที่แต่พื้นหลังยังคงอยู่นิ่ง ทำให้เกิดเอฟเฟกต์พารัลแลกซ์ bg-local จะทำให้พื้นหลังเลื่อนไปพร้อมกับเนื้อหาขององค์ประกอบ ส่วน bg-scroll (ค่าเริ่มต้น) จะเลื่อนพื้นหลังไปพร้อมกับองค์ประกอบ แต่ไม่เลื่อนไปพร้อมกับเนื้อหา

<!-- Parallax section -->
<div
  style="background-image: url('mountain.jpg');"
  class="h-96 bg-fixed bg-cover bg-center">
  <div class="h-full flex items-center justify-center">
    <h2 class="text-4xl font-bold text-white drop-shadow-lg">Parallax Hero</h2>
  </div>
</div>

พฤติกรรมพื้นหลังแบบตอบสนอง

พฤติกรรมของพื้นหลังมักต้องเปลี่ยนไปตามขนาดหน้าจอที่แตกต่างกัน บนอุปกรณ์เคลื่อนที่ รูปภาพอาจเหมาะกับการจัดกึ่งกลางในตำแหน่งอื่นหรือใช้การตัดส่วนที่เล็กกว่า ให้ใช้คำนำหน้าแบบตอบสนองกับยูทิลิตีพื้นหลังใดก็ได้: bg-top md:bg-center จะจัดรูปภาพให้อยู่กึ่งกลางบนเดสก์ท็อป แต่จะแสดงส่วนบนของรูปภาพบนอุปกรณ์เคลื่อนที่ ซึ่งสำคัญต่อการรักษาจุดโฟกัสที่เหมาะสมของรูปภาพพื้นหลังในทุกความกว้างของพื้นที่แสดงผล

<div
  style="background-image: url('hero.jpg');"
  class="h-64 md:h-96 bg-cover bg-top md:bg-center">
</div>

การสร้างพื้นหลังเต็มหน้า

การสร้างพื้นหลังรูปภาพเต็มหน้าทำได้โดยกำหนดรูปภาพให้กับคอนเทนเนอร์ที่เต็มพื้นที่แสดงผล: ใช้ min-h-screen สำหรับความสูง และ bg-cover bg-center bg-no-repeat bg-fixed สำหรับพฤติกรรมของรูปภาพ เพิ่มคอนเทนเนอร์ relative ด้านในสำหรับเนื้อหา เพื่อให้เนื้อหาอยู่เหนือพื้นหลัง ควรเพิ่มชั้นซ้อนทับแบบโปร่งใสบางส่วนเสมอ เพื่อให้ข้อความยังอ่านได้ชัดเจนบนรูปภาพ

<div
  style="background-image: url('bg.jpg');"
  class="min-h-screen bg-cover bg-center bg-no-repeat relative">
  <!-- Dark overlay for text contrast -->
  <div class="absolute inset-0 bg-black/40"></div>
  <!-- Content above overlay -->
  <div class="relative z-10 flex items-center justify-center min-h-screen">
    <h1 class="text-5xl font-bold text-white">Welcome</h1>
  </div>
</div>

การใช้ object-fit กับ img เทียบกับพื้นหลัง

เมื่อทำได้ ให้ใช้แท็ก <img> ร่วมกับ object-cover และ object-position แทนรูปภาพพื้นหลัง — วิธีนี้ดีกว่าสำหรับการเข้าถึง (มีข้อความ alt) การทำ SEO (รูปภาพที่โปรแกรมค้นหาจัดทำดัชนีได้) และประสิทธิภาพ (การโหลดแบบขี้เกียจที่เบราว์เซอร์รองรับโดยตรง) ควรสงวนรูปภาพพื้นหลังไว้สำหรับลวดลายตกแต่ง พื้นผิว และกรณีที่รูปภาพไม่มีความหมายเชิงเนื้อหา

<!-- Prefer img with object-fit for content images -->
<div class="relative h-64 overflow-hidden rounded-xl">
  <img
    src="hero.jpg"
    alt="Mountain landscape at sunrise"
    class="absolute inset-0 w-full h-full object-cover object-center"
    loading="lazy"
  />
</div>

สรุปการเขียนพื้นหลังแบบย่อของ Tailwind

ต่อไปนี้คือข้อมูลอ้างอิงอย่างรวดเร็วสำหรับกลุ่มยูทิลิตีพื้นหลัง: bg-cover / bg-contain / bg-auto ใช้กำหนดขนาด, bg-center / bg-top / bg-bottom / bg-left / bg-right ใช้กำหนดตำแหน่ง, bg-no-repeat / bg-repeat / bg-repeat-x / bg-repeat-y ใช้กำหนดการเรียงซ้ำ และ bg-fixed / bg-local / bg-scroll ใช้กำหนดการยึดพื้นหลัง โดยทั่วไป ส่วนเปิดเรื่องส่วนใหญ่ใช้ bg-cover bg-center bg-no-repeat เป็นค่าพื้นฐานที่เชื่อถือได้

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจแนวคิด Tailwind CSS Mastery จากบทเรียนนี้

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปบทเรียน

ในบทเรียนนี้ คุณได้เรียนรู้ว่า bg-cover จะปรับขนาดให้เต็มคอนเทนเนอร์ ส่วน bg-contain จะปรับให้พอดีอยู่ด้านในโดยไม่ตัดส่วนใดออก, bg-center / bg-top / bg-bottom จะควบคุมว่าส่วนใดของรูปภาพถูกยึดไว้ในกรอบ และ bg-fixed จะสร้างเอฟเฟกต์พารัลแลกซ์ ส่วน bg-no-repeat จะป้องกันการเรียงซ้ำ บทถัดไป เราจะเรียนรู้สเกลระยะห่างของ Tailwind สำหรับระยะขอบและระยะห่างภายในให้เชี่ยวชาญ

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “ขนาด ตำแหน่ง และการทำซ้ำพื้นหลัง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ขนาด ตำแหน่ง และการทำซ้ำพื้นหลัง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ขนาด ตำแหน่ง และการทำซ้ำพื้นหลัง”

ควบคุมการแสดงภาพพื้นหลังด้วยยูทิลิตี bg-cover, bg-contain, bg-center และ bg-no-repeat คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ขนาด ตำแหน่ง และการทำซ้ำพื้นหลัง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม

ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Tailwind CSS Academy