मैं संपूर्ण HTML तत्व को कवर करने के लिए पृष्ठभूमि की छवि को कैसे बढ़ाऊँ?

Question 1

मैं इसकी संपूर्ण चौड़ाई और ऊँचाई को खींचने के लिए HTML तत्व (निकाय, div, आदि) की पृष्ठभूमि छवि प्राप्त करने का प्रयास कर रहा हूँ।

ज्यादा किस्मत वाली नहीं। क्या यह भी संभव है या क्या मुझे पृष्ठभूमि की छवि होने के अलावा इसे किसी और तरीके से करना होगा?

मेरी वर्तमान सीएसएस है:

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

अग्रिम में धन्यवाद।

संपादित करें: मैं गैब्रियल के सुझाव में सीएसएस को बनाए रखने के लिए उत्सुक नहीं हूं इसलिए मैं इसके बजाय पृष्ठ के लेआउट को बदल रहा हूं। लेकिन यह सबसे अच्छा जवाब की तरह लगता है इसलिए मैं इसे इस तरह चिह्नित कर रहा हूं।

Question 2

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

Question 3

background-sizeसंपत्ति का उपयोग करें : http://www.w3.org/TR/css3-background/#the-background-size

Question 4

संक्षेप में आप यह कोशिश कर सकते हैं ...।

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

और यह मेरे लिए ठीक काम कर रहा है।

Question 5

सुनिश्चित नहीं है कि पृष्ठभूमि छवि खींचना संभव है। यदि आपको लगता है कि यह संभव नहीं है, या आपके सभी लक्षित ब्राउज़रों में विश्वसनीय नहीं है, तो आप z- इंडेक्स सेट लोअर के साथ स्ट्रेच किए गए img टैग का उपयोग करने का प्रयास कर सकते हैं, और स्थिति को निरपेक्ष सेट कर सकते हैं ताकि अन्य सामग्री उसके ऊपर दिखाई दे।

हमें बताएं कि आप क्या कर रहे हैं।

संपादित करें: मैंने जो सुझाव दिया वह मूल रूप से गैब्रिएल की कड़ी में है। तो कोशिश करें कि :)

Question 6

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

Question 7

यदि आपको स्क्रीन को आकार देते समय अपनी पृष्ठभूमि छवि को फैलाने की आवश्यकता है और आपको पुराने ब्राउज़र संस्करणों के साथ संगतता की आवश्यकता नहीं है, तो यह काम करेगा:

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

Question 8

यदि आपके पास एक बड़ी परिदृश्य छवि है, तो यह उदाहरण यहां पोर्ट्रेट मोड में पृष्ठभूमि का आकार देता है, ताकि यह शीर्ष पर प्रदर्शित हो, नीचे की तरफ रिक्त हो:

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

Question 9

निम्नांकित प्रभाव को प्राप्त करने के लिए मैं निम्नलिखित कोड का उपयोग करता हूँ:

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

Question 10

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;

Question 11

आप शुद्ध CSS में नहीं कर सकते। अन्य सभी घटकों के पीछे पूरे पृष्ठ को कवर करने वाली एक छवि होने से संभवतः आपकी सबसे अच्छी शर्त है (ऐसा लगता है कि ऊपर दिया गया समाधान है)। वैसे भी, संभावना है कि यह बहुत भयानक लगेगा। मैं या तो बड़े स्क्रीन रिज़ॉल्यूशन को कवर करने के लिए एक छवि को बड़ा करने की कोशिश करूँगा (1600x1200 तक ऊपर, यह स्कारर है), पृष्ठ की चौड़ाई को सीमित करने के लिए, या सिर्फ एक छवि का उपयोग करने के लिए उस टाइल का उपयोग करें।

Question 12

छवि {

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

Question 13

बस शरीर के प्रत्यक्ष बच्चे (उदाहरण के लिए वर्ग नाम बीजी के साथ) होने के लिए, शरीर के अन्य सभी तत्वों को शामिल करते हुए, और इसे 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 उस भाग पर स्क्रॉल करें जो कहता है:

यदि पृष्ठभूमि-आकार की संपत्ति "100% 100%" पर सेट है, तो पृष्ठभूमि छवि पूरे सामग्री क्षेत्र को कवर करने के लिए खिंचाव करेगी

वहां यह दिखाता है कि 'img_flowers.jpg' स्क्रीन या ब्राउज़र के आकार तक फैला है, भले ही आप उसका आकार कैसे भी हो।

Question 14

इससे मेरा काम बनता है

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