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

[SG14]

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

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

[jim_no1]

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

[mSkyline]

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

background: url('xxxx.jpg') top center no-repeat;

[KINGRPG]

background-size: 100%; มั้งครับ 

[MeenyFancy]

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;
}

[แน่น]

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

[SG14]

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

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

[SG14]

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

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

[TummZ]

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

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

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

[MeenyFancy]

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

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

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

[kobesilk]

ใส่ รูปไปใน 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

[kiraoji]

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

คือสมมติมีภาพ 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]

 width="100%"
<img src="/images/xxx.jpg" width="100%"> แบบนี้ป่าว

[SG14]

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

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

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

ใช่เลยคะ

[SG14]

ใส่ รูปไปใน 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="" />

[thekoper]

จขกท. ได้แล้ว ส่ง  URL มาชมด้วยนะครับ

[SG14]

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

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

[TummZ]

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

*http://www.wimun.com/background

[AbuseMan]

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

[bompople]

width: 100%;