ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programming[html] จะจัดภาพ background ให้เข้ากับทุกขนาดจอได้อย่างไรคะ
หน้า: [1] 2   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: [html] จะจัดภาพ background ให้เข้ากับทุกขนาดจอได้อย่างไรคะ  (อ่าน 31942 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
SG14
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 35
ออฟไลน์ ออฟไลน์

กระทู้: 1,398



ดูรายละเอียด เว็บไซต์
« เมื่อ: 27 มกราคม 2012, 11:09:13 »

 จะจัดภาพ background ให้เข้ากับทุกขนาดจอได้อย่างไรคะ

เช่นมีภาพ 1440* 800 มาเป็น bg แต่อยากให้แสดงผลให้เข้ากับทุก ขนาดคะ ต้องใช้ html อย่างไรคะ หรือจัดด้วย css

 wanwan017
บันทึกการเข้า

jim_no1
สมุนแก๊งเสียว
*

พลังน้ำใจ: 19
ออฟไลน์ ออฟไลน์

กระทู้: 857



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 27 มกราคม 2012, 11:13:02 »

ไม่เิข้าใจคำถามแฮะ
บันทึกการเข้า

mSkyline
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 131
ออฟไลน์ ออฟไลน์

กระทู้: 1,472



ดูรายละเอียด
« ตอบ #2 เมื่อ: 27 มกราคม 2012, 11:14:51 »

ก็จัด css ให้มัน ชิด บน กลาง ครับ
ยิ่งใหญ่ไว้ยิ่งดีครับ เผื่อเจอพวกตั้งขนาดขอไว้สูงๆ แล้วรูปมันจะไปไม่ถึงครับ

background: url('xxxx.jpg') top center no-repeat;
บันทึกการเข้า

AnyWhereToThai รับขนสินค้าจาก US UK JP KR CN กลับไทย
https://www.facebook.com/AnyWhereToThai
KINGRPG
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 381
ออฟไลน์ ออฟไลน์

กระทู้: 5,486



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 27 มกราคม 2012, 11:20:05 »

background-size: 100%; มั้งครับ  Cry
บันทึกการเข้า

MeenyFancy
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 208
ออฟไลน์ ออฟไลน์

กระทู้: 1,270



ดูรายละเอียด
« ตอบ #4 เมื่อ: 27 มกราคม 2012, 11:34:39 »

tyr this
โค๊ด:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
บันทึกการเข้า

แน่น
ก๊วนเสียว
*

พลังน้ำใจ: 19
ออฟไลน์ ออฟไลน์

กระทู้: 450



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 27 มกราคม 2012, 11:37:20 »

ซุ่มรอจนได้คำตอบ ช่วย จขกท ขอบคุณอีกแรง wanwan017
บันทึกการเข้า

SG14
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 35
ออฟไลน์ ออฟไลน์

กระทู้: 1,398



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 27 มกราคม 2012, 11:43:42 »

ไม่เิข้าใจคำถามแฮะ

คือสมมติมีภาพ bg ขนาด 1440*900 แต่อยากให้ bg อันนี้มันฟิค พอดีกับทุกความละเอียดหน้าจอนะคะ
เช่น จอที่บ้านเรา 1280*900 ก้สามารถมอง bg ได้เหมือนกับ 1440*900 อะคะ

บันทึกการเข้า

SG14
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 35
ออฟไลน์ ออฟไลน์

กระทู้: 1,398



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 27 มกราคม 2012, 11:47:24 »

ยังทำไม่ได้เลยคะ

มีของคุณ MeenyFancy  เริ่มใกล้เคียง wanwan017
บันทึกการเข้า

TummZ
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 93
ออฟไลน์ ออฟไลน์

กระทู้: 1,346



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 27 มกราคม 2012, 12:05:05 »

ยังทำไม่ได้เลยคะ

มีของคุณ MeenyFancy  เริ่มใกล้เคียง wanwan017

หมายความว่า => ถึงแม้จะเปลี่ยนขนาดหน้าจอ ภาพ BG จะต้องไม่เสียสัดส่วนด้วยใช่ไหมครับ
บันทึกการเข้า

MeenyFancy
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 208
ออฟไลน์ ออฟไลน์

กระทู้: 1,270



ดูรายละเอียด
« ตอบ #9 เมื่อ: 27 มกราคม 2012, 12:37:40 »

ยังทำไม่ได้เลยคะ

มีของคุณ MeenyFancy  เริ่มใกล้เคียง wanwan017

โค้ดตัวนั้นไม่รองรับIE ครับ ถ้าเปิดใน chrome/FF จะเวิค
แต่ถ้าจะให้ใช้ใน IE ได้ต้องใช้พวก JQuery
บันทึกการเข้า

kobesilk
สมุนแก๊งเสียว
*

พลังน้ำใจ: 84
ออฟไลน์ ออฟไลน์

กระทู้: 676



ดูรายละเอียด เว็บไซต์
« ตอบ #10 เมื่อ: 27 มกราคม 2012, 12:40:57 »

ใส่ รูปไปใน html นะครับ ให้ชื่อ class ตรงกับ CSS ของเรา



#img.source-image {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

มันจะไม่ใช่ background ตามทฤษฎี แต่มันคือรูปภาพที่อยู่หลังสุดของเว็บ   เพราะงั้นตามทางปฏิบัติ มันคือ background นั่นแหละครับ

Ref: http://css-tricks.com/how-to-resizeable-background-image/
Search keyword: css background resize
บันทึกการเข้า

เปิดแล้ว ModifyWordPressCourse.com - สอนการสร้างธีม และแก้ไขธีม WordPress อย่างถูกวิธี  เรียนจบทำเว็บได้เลย   

เรียนแล้วจะปรับแก้ธีมได้ทุกอย่างแบบถูกต้อง พร้อมวิธีลัด และเทคนิคที่ใช้ทำเว็บให้ลูกค้า   และสอนการเป็น Freelance พร้อมเครื่องมือที่จะทำให้ชีวิตคุณง่ายขึ้นมาก สอน wordpress theme แก้ธีมได้ดั่งใจ



ไปดูตัวอย่าง ธีม เทพ ๆ ได้ที่นี่ (ดีไซน์ง่าย ๆ แต่ขายได้)
kiraoji
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 226
ออฟไลน์ ออฟไลน์

กระทู้: 1,681



ดูรายละเอียด
« ตอบ #11 เมื่อ: 27 มกราคม 2012, 12:47:09 »

ไม่เิข้าใจคำถามแฮะ

คือสมมติมีภาพ bg ขนาด 1440*900 แต่อยากให้ bg อันนี้มันฟิค พอดีกับทุกความละเอียดหน้าจอนะคะ
เช่น จอที่บ้านเรา 1280*900 ก้สามารถมอง bg ได้เหมือนกับ 1440*900 อะคะ



ตัวด้านล่างนี้ css3   ผมว่าตัวนี้น่าจะใช่สุด

tyr this
โค๊ด:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
บันทึกการเข้า
hiomard
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 72
ออฟไลน์ ออฟไลน์

กระทู้: 1,025



ดูรายละเอียด เว็บไซต์
« ตอบ #12 เมื่อ: 27 มกราคม 2012, 12:51:52 »

 width="100%"
<img src="/images/xxx.jpg" width="100%"> แบบนี้ป่าว
บันทึกการเข้า

SG14
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 35
ออฟไลน์ ออฟไลน์

กระทู้: 1,398



ดูรายละเอียด เว็บไซต์
« ตอบ #13 เมื่อ: 27 มกราคม 2012, 12:55:34 »

ยังทำไม่ได้เลยคะ

มีของคุณ MeenyFancy  เริ่มใกล้เคียง wanwan017

หมายความว่า => ถึงแม้จะเปลี่ยนขนาดหน้าจอ ภาพ BG จะต้องไม่เสียสัดส่วนด้วยใช่ไหมครับ

ใช่เลยคะ
บันทึกการเข้า

SG14
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 35
ออฟไลน์ ออฟไลน์

กระทู้: 1,398



ดูรายละเอียด เว็บไซต์
« ตอบ #14 เมื่อ: 27 มกราคม 2012, 12:57:41 »

ใส่ รูปไปใน html นะครับ ให้ชื่อ class ตรงกับ CSS ของเรา



#img.source-image {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

มันจะไม่ใช่ background ตามทฤษฎี แต่มันคือรูปภาพที่อยู่หลังสุดของเว็บ   เพราะงั้นตามทางปฏิบัติ มันคือ background นั่นแหละครับ

Ref: http://css-tricks.com/how-to-resizeable-background-image/
Search keyword: css background resize



แบบนี้่หรอคะ
<img class="source-image" src="images/image.jpg" alt="" />
« แก้ไขครั้งสุดท้าย: 27 มกราคม 2012, 12:59:25 โดย SG14 » บันทึกการเข้า

thekoper
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 78
ออฟไลน์ ออฟไลน์

กระทู้: 1,013



ดูรายละเอียด เว็บไซต์
« ตอบ #15 เมื่อ: 27 มกราคม 2012, 13:12:07 »

จขกท. ได้แล้ว ส่ง  URL มาชมด้วยนะครับ
บันทึกการเข้า
SG14
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 35
ออฟไลน์ ออฟไลน์

กระทู้: 1,398



ดูรายละเอียด เว็บไซต์
« ตอบ #16 เมื่อ: 27 มกราคม 2012, 13:15:50 »

ตอนนี้คาดว่าจะทำไม่ได้แน่ๆเลยคะเลยตัดสินใจจะ เอา bg repeat x และ y ไว้คะ แล้วตัดภาพอีกไว้ด้านล่างโดยใช้ css วางแทน

bg เราเป็นรูปเมฆด้านบนแล้วมีต้นไว้ด้านล่างนะคะ ตรงกลางเป็นท้องฟ้า
บันทึกการเข้า

TummZ
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 93
ออฟไลน์ ออฟไลน์

กระทู้: 1,346



ดูรายละเอียด เว็บไซต์
« ตอบ #17 เมื่อ: 27 มกราคม 2012, 14:26:06 »

ลองดูครับ ใช่แบบนี้ไหม

*http://www.wimun.com/background
บันทึกการเข้า

AbuseMan
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 104
ออฟไลน์ ออฟไลน์

กระทู้: 1,103



ดูรายละเอียด เว็บไซต์
« ตอบ #18 เมื่อ: 27 มกราคม 2012, 14:29:31 »

รูป bg ใหญ่ๆ มันทำให้หน้าเว็บโหลดช้านะนั่น
บันทึกการเข้า

ฟังเพลงออนไลน์ : เว็บเพลงออนไลน์ที่คุณขอฟังเพลงได้ด้วยตัวคุณเอง
ห้องแชท : บริการฟรีห้องแชทสำหรับติดเว็บ
เพลงใหม่ : เพลงใหม่ เพลงฮิต
บ้านคุ้มค่า : ลงประกาศขายบ้าน ที่ดิน พร้อมอัพเดทโครงการบ้านและคอนโดใหม่ที่น่าสนใจ
bompople
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 245
ออฟไลน์ ออฟไลน์

กระทู้: 2,174



ดูรายละเอียด
« ตอบ #19 เมื่อ: 27 มกราคม 2012, 14:36:01 »

width: 100%;
บันทึกการเข้า

หน้า: [1] 2   ขึ้นบน
พิมพ์