CSS Background

     

รูปภาพจาก http://blog.templatemonster.com/

         บทความนี้ยังคงอยู่ที่ CSS นะครับวันนี้จะมาแชร์การเซ็ต Background ต่างๆลงในหน้าเว็บของเราครับทุกเว็บจะต้องมีการตกแต่งและส่วนที่สำคัญเลยคือ Background เรามาดูกันเลยครับว่า Background CSS มีอะไรบ้าง และทำอย่างไรบ้าง

ตัวอย่าง CSS Background Color

body {
    background-color: #000000;
}

    จากตัวอย่างด้านบนเป็นการเซ็ต background ของ tag body ให้เป็นสีดำ tag body ในหน้า html เราน่าจะรู้กันอยู่แล้วนะครับว่าเป็น tag ที่คอบ content ของเว็บเราไว้

h1 {
    background-color: #FFFFFF;
}

p {
    background-color: #FFFFFF;
}

div {
    background-color: #FFFFFF;
}

ตัวอย่างด้านบนเป็นการ set background color ให้เป็นสีขาวตาม tag ต่างๆนะครับ

ตัวอย่าง CSS Background Image

body {
    background-image: url("background.jpg");
}

    นอกจากเราจะเซ็ตสีให้กับพื้นหลังของเราได้แล้วเราสามารถเซ็ตพื้นหลังด้วยรูปภาพได้ด้วย จากตัวอย่างด้านบนเป็นการเซ็ตให้ tag body มีพื้นหลังเป็นรูปจาก file background.jpg

ตัวอย่าง CSS Background Repeat

body {
    background-image: url("background.jpg");
    background-repeat: repeat-x;
}

    จากตัวอย่างด้านบนนี้ถ้าเราใส่รูปเป็นพื้นหลังไปแล้วแต่รูปภาพที่เราใช้ดันมีขนาดเล็กไม่เต็มพื้นที่หน้าเว็บเราสามารถใช้คำสั่ง repeat ในการทำให้ดูสวยขึ้นได้ครับผม จากตัวอย่างเป็นการ repeat ตามแนวแกน x หรือแนวตั้งนั่นเองครับ

ตัวอย่าง CSS Background Position

body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

    นอกจากเซ็ตพื้นหลังให้เป็นเหมือนกันเต็มหน้าเว็บแล้วบางครั้งเราอาจจะอยากให้พื้นหลังเป็นสีขาวธรรมดาแต่มีรูปโชว์ตามตำแหน่งที่เราต้องการนิดหน่อย ดังตัวอย่างด้านบนครับ เซ็ต background-image ให้ใช้รูปต้นไม้ที่เราต้องการ เซ็ตไม่ให้มีการแสดงรูปซ้ำ background-repeat:no-repeat และเซ็ตตำแหน่งรูปที่เราต้องการให้แสดงในตัวอย่างเซ็ตให้รูปแสดงที่ด้านขวามุมบน

ตัวอย่าง CSS Background Attachment

body { 
    background-image: url('tree.gif');
    background-repeat: no-repeat;

    background-position: right top;
    background-attachment: fixed;
}

         ตัวอย่างสุดท้ายครับการเซ็ต background-attachment ในตัวอย่างด้านบนนี้เซ็ตให้เป็น fixed ก็คือถ้าหน้าเว็บเรายาวมาก scroll ยังไงรูปต้นไม้ก็จะแสดงอยู่ตำแหน่งเดิมแต่ถ้าเราเซ็ตให้เป็น scroll ถ้าเราเลื่อนหน้าเว็บรูปต้นไม้ที่เป็น background ก็จะเลื่อนตามไปด้วยครับ

      พอเข้าใจกันบ้างแล้วนะครับสำหรับการเซ็ต background ให้หน้าเว็บของเรา ด้วย CSS วันนี้ก็ขอจบเพียงเท่านี้ก่อนนะครับพรุ้งนี้จะมีบทความมาแชร์ความรู้มาให้ได้อ่านกันอีกแน่นอนครับ สวัสดีครับ