ฉันจะยืดภาพพื้นหลังให้ครอบคลุมองค์ประกอบ HTML ทั้งหมดได้อย่างไร

ฉันกำลังพยายามหาภาพพื้นหลังขององค์ประกอบ HTML (body, div ฯลฯ ) เพื่อยืดความกว้างและความสูงทั้งหมด

ไม่ค่อยมีโชค. เป็นไปได้หรือไม่หรือต้องทำวิธีอื่นนอกจากเป็นภาพพื้นหลัง

css ปัจจุบันของฉันคือ:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

ขอบคุณล่วงหน้า.

แก้ไข: ฉันไม่กระตือรือร้นที่จะดูแล CSS ในคำแนะนำของ Gabriel ดังนั้นฉันจึงเปลี่ยนเค้าโครงของหน้าแทน แต่ดูเหมือนว่าจะเป็นคำตอบที่ดีที่สุดดังนั้นฉันจึงทำเครื่องหมายเป็นเช่นนั้น

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

ใช้background-sizeคุณสมบัติ: http://www.w3.org/TR/css3-background/#the-background-size

ในระยะสั้นคุณสามารถลองสิ่งนี้ ....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

ที่ฉันใช้ css และ js ไม่กี่ ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

และมันก็ทำงานได้ดีสำหรับฉัน

ไม่แน่ใจว่าสามารถขยายภาพพื้นหลังได้ หากคุณพบว่าเป็นไปไม่ได้หรือไม่น่าเชื่อถือในเบราว์เซอร์เป้าหมายทั้งหมดของคุณคุณสามารถลองใช้แท็ก img ที่ยืดออกโดยตั้งค่าดัชนี z ไว้ต่ำกว่าและกำหนดตำแหน่งเป็นค่าสัมบูรณ์เพื่อให้เนื้อหาอื่น ๆ ปรากฏอยู่ด้านบน

แจ้งให้เราทราบว่าคุณทำอะไร

แก้ไข: สิ่งที่ฉันแนะนำคือสิ่งที่อยู่ในลิงค์ของ gabriel ลองดูสิ :)

หากต้องการขยายคำตอบของ @PhiLho คุณสามารถจัดกึ่งกลางภาพขนาดใหญ่มาก (หรือภาพขนาดใดก็ได้) บนหน้าด้วย:

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

หรือคุณอาจใช้ภาพขนาดเล็กที่มีสีพื้นหลังที่ตรงกับพื้นหลังของภาพ (หากเป็นสีทึบ) สิ่งนี้อาจเหมาะกับวัตถุประสงค์ของคุณหรือไม่ก็ได้

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

หากคุณต้องการยืดภาพพื้นหลังในขณะที่ปรับขนาดหน้าจอและคุณไม่ต้องการความเข้ากันได้กับเบราว์เซอร์เวอร์ชันเก่าสิ่งนี้จะได้ผล:

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

หากคุณมีภาพแนวนอนขนาดใหญ่ตัวอย่างนี้จะปรับขนาดพื้นหลังในโหมดแนวตั้งเพื่อให้แสดงด้านบนโดยเว้นว่างไว้ที่ด้านล่าง:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

รหัสต่อไปนี้ฉันใช้เป็นส่วนใหญ่เพื่อให้บรรลุผลที่ถาม:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

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;

คุณไม่สามารถใช้ CSS บริสุทธิ์ได้ การมีภาพครอบคลุมทั้งหน้าหลังส่วนประกอบอื่น ๆ ทั้งหมดน่าจะเป็นทางออกที่ดีที่สุดของคุณ (ดูเหมือนว่าจะเป็นวิธีแก้ปัญหาที่ระบุไว้ด้านบน) อย่างไรก็ตามโอกาสที่มันจะดูแย่มาก ฉันจะลองใช้ภาพที่ใหญ่พอที่จะครอบคลุมความละเอียดหน้าจอส่วนใหญ่ (พูดได้ถึง 1600x1200 ด้านบนเป็นตัวลดขนาด) เพื่อจำกัดความกว้างของหน้าหรือใช้ภาพที่เรียงต่อกัน

ภาพ{

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 

เพียงสร้าง div ให้เป็นลูกโดยตรงของ body (เช่นชื่อคลาส bg) รวมองค์ประกอบอื่น ๆ ทั้งหมดใน body และเพิ่มสิ่งนี้ลงในไฟล์ CSS:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

อ้างอิงลิงค์นี้: https://www.w3schools.com/css/css_rwd_images.asp เลื่อนลงไปที่ส่วนที่ระบุว่า:

2. หากตั้งค่าคุณสมบัติขนาดพื้นหลังเป็น "100% 100%" ภาพพื้นหลังจะยืดออกเพื่อให้ครอบคลุมพื้นที่เนื้อหาทั้งหมด

ที่นั่นจะแสดง 'img_flowers.jpg' ซึ่งขยายไปตามขนาดของหน้าจอหรือเบราว์เซอร์ไม่ว่าคุณจะปรับขนาดอย่างไร

มันใช้ได้กับฉัน

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}