बैकग्राउंड में एक CSS इमेज को स्ट्रेच और स्केल करें - केवल CSS के साथ

Question

मैं चाहता हूं कि ब्राउजर व्यूपोर्ट के आकार के आधार पर मेरी बैकग्राउंड इमेज स्ट्रेच और स्केल हो।

मैंने स्टैक ओवरफ्लो पर कुछ प्रश्न देखे हैं जो काम करते हैं, जैसे कि स्ट्रेच और उदाहरण के लिए सीएसएस पृष्ठभूमि । यह अच्छी तरह से काम करता है, लेकिन मैं backgroundएक imgटैग के साथ नहीं, छवि का उपयोग करना चाहता हूं ।

उस एक imgटैग में एक टैग लगाया गया है, और फिर सीएसएस के साथ हम imgटैग को श्रद्धांजलि देते हैं ।

width:100%; height:100%;

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

क्या background-imageघोषणा के साथ इसे करने की कोई अच्छी विधि है ?

Comments

पृष्ठभूमि का आकार: 100% 100%;

— एंड्रियास एल।

शायद यह डेमो मददगार हो सकता है: w3schools.com/cssref/…

— Davide

सीएसएस पृष्ठभूमि छवि

— एलेक्स अंगास

@AlexAngas प्रश्न की आयु एक कारक नहीं होनी चाहिए? यह एक 6 साल पहले पूछा गया था और आपके द्वारा इंगित किया गया सवाल 4 साल पहले पूछा गया था।

— फैबियो एंट्यून्स

@ FábioAntunes IMHO हम सर्वश्रेष्ठ उत्तरों के साथ प्रश्न को बंद नहीं करना चाहते हैं और इसके बजाय डुप्लिकेट को इससे लिंक करने के लिए प्रोत्साहित करते हैं। मुझे यकीन है कि यह मेटा पर चर्चा की गई होगी, लेकिन मैं इसे अभी नहीं पा सकता हूं ...

— एलेक्स एंगस

Answer 1

CSS3 में एक छोटी सी विशेषता है जिसे कहा जाता है background-size:cover।

यह छवि को मापता है ताकि पहलू अनुपात बनाए रखते हुए पृष्ठभूमि क्षेत्र पूरी तरह से पृष्ठभूमि छवि द्वारा कवर किया गया हो। पूरे क्षेत्र को कवर किया जाएगा। हालाँकि, छवि का हिस्सा दिखाई नहीं दे सकता है यदि आकार और आकार की चौड़ाई बहुत अधिक है।

Comments

यदि पहलू अनुपात मेल नहीं खाता है, तो छवि को कवर करें, इसलिए यह एक अच्छा सामान्य समाधान नहीं है।

— Mahemoff

यदि आप इसे IE ब्राउज़रों में काम करना चाहते हैं - github.com/louisremi/background-size-polyfill

— Wreeecks 2:26

यह फ़ायरफ़ॉक्स पर काम नहीं करता है। हालांकि, background-size: 100vw 100vh;चाल अच्छी तरह से करता है।

— यानिक मौर्य

@YannickMauray कोशिश: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;

— अमित कुमार खरे

यदि आप ऐसा चाहते हैं, लेकिन केवल क्षैतिज अक्ष के लिए, इसका उपयोग करें: background-size: 100% auto; stackoverflow.com/questions/41025630/…

— antoineMoPa

Answer 2

आप इसे काफी अच्छी तरह से करने के लिए CSS3 की संपत्ति का उपयोग कर सकते हैं। यह अनुपात को आकार देता है इसलिए कोई छवि विकृति नहीं है (हालांकि यह छोटी छवियों को अपकेंद्रित करता है)। बस ध्यान दें, यह अभी तक सभी ब्राउज़रों में लागू नहीं किया गया है।

background-size: 100%;

Comments

@nXqd बहुत सुंदर पूर्ण कोड है! एक के साथ एक कंटेनर बनाएँ background-imageऔर ऊपर की संपत्ति शामिल करें। जैसा कि उल्लेख किया गया है, ब्राउज़र समर्थन अभी तक अच्छा नहीं है और इस के ब्राउज़र विशिष्ट संस्करण हैं। -webkit-background-sizeआदि देखें W3C CSS3 मॉड्यूल: पृष्ठभूमि-आकार और css3.info: पृष्ठभूमि-आकार

— MrWhite

छवि के पहलू अनुपात को संरक्षित करने के लिए आपको "पृष्ठभूमि-आकार: आवरण;" का उपयोग करना चाहिए या "पृष्ठभूमि-आकार: सम्‍मिलित है;"। मैंने एक पॉलीफ़िल बनाया है जो IE8 में उन मूल्यों को लागू करता है: github.com/louisremi/background-size-polyfill

— Louis-Rémi

autoपहलू अनुपात को संरक्षित करने के लिए इसे जोड़ना भी उचित है।

— चिबुएज ओपटाटा

Answer 3

मेरे द्वारा बताए गए कोड का उपयोग करते हुए ...

एचटीएमएल

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

सीएसएस

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

यह वांछित प्रभाव पैदा करता है: केवल सामग्री स्क्रॉल होगी, न कि पृष्ठभूमि।

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

CSS 3 के साथ ऐसा लगता है कि यह बहुत आसान होगा।

Comments

लेकिन यह बैकग्राउंड इमेज नहीं है। आप इसे केवल एक ब्लॉक में ही कर सकते हैं, लेकिन इनलाइन तत्व जैसे इनपुट [टाइप = टेक्स्ट] पर नहीं। या मैं गलत हूँ?

— deerchao

वर्ग के लिए कोई ज़रूरत नहीं है = "खिंचाव", बस # बैकग्राउंड img {} का उपयोग पहचानकर्ता के रूप में css में करें

— BerggreenDK

z- इंडेक्स: -1; अपनी छवि को पृष्ठभूमि में रखता है। यदि आप अग्रभूमि में अपनी छवि दिखाने की इच्छा रखते हैं, तो आप या तो जेड-इंडेक्स मूल्य बढ़ा सकते हैं या उस इंडेक्स को हटा सकते हैं।

— गोखानकूट

समस्या मैं IE8 के साथ कर रहा हूँ। DIV की पृष्ठभूमि छवि पूरी तरह से फैली हुई है लेकिन IE8 में चित्र DIV के बाहर जाते हैं इसलिए पूर्ण छवि को देखने में सक्षम नहीं हो रहे हैं। इससे फसल खराब हो जाती है। यहाँ मेरा सवाल है: stackoverflow.com/questions/22331179/…

— Si8

लोग जो स्पष्ट गलती करते हैं, वह है कि बैकग्राउंड इमेज को css में डालना (अर्थात इसके द्वारा background : url("example.png");) और उसके बाद css विशेषता का उपयोग करके background-size:100%;स्क्रीन को स्क्रीन की चौड़ाई के लिए उम्मीद की जाती है। यह काम नहीं करेगा, यह होगा? अगर आप बॉडी के लिए बैकग्राउंड इमेज डालना चाहते हैं, तो बॉडी टैग की तरह एक इमेज फीचर जोड़ा जाना चाहिए <body background="example.png">। फिर background-size:100%;इसे स्केल करने के लिए css का उपयोग करें ।

— sjsam

Answer 4

सीएसएस:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

Comments

हालाँकि, यह IE8 में काम नहीं करता है। यह विंडो के ऊपर और नीचे एक मार्जिन बनाता है।

— इरेडमिस्टर

एंड्रॉइड पर इसका उपयोग html, body {...}करने के बजाय इसके लिए काम किया body {...}।

— एडवर्ड

Answer 5

background-size: 100% 100%; 

दोनों अक्षों पर पूरे तत्व को भरने के लिए पृष्ठभूमि को फैलाता है।

Answer 6

निम्नलिखित सीएसएस भाग को सभी ब्राउज़रों के साथ छवि को फैलाना चाहिए।

मैं इसे प्रत्येक पृष्ठ के लिए गतिशील रूप से करता हूं। इसलिए मैं प्रत्येक पृष्ठ के लिए अपना HTML टैग बनाने के लिए PHP का उपयोग करता हूं। सभी चित्र 'छवि' फ़ोल्डर में हैं और 'Bg.jpg' के साथ समाप्त होते हैं।

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

यदि आपके पास सभी पृष्ठों के लिए केवल एक पृष्ठभूमि चित्र है, तो आप $picचर को हटा सकते हैं , बैक-स्लैश से बच सकते हैं, पथ समायोजित कर सकते हैं और इस कोड को अपनी सीएसएस फ़ाइल में रख सकते हैं।

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

यह इंटरनेट एक्सप्लोरर 9, क्रोम 21 और फ़ायरफ़ॉक्स 14 के साथ परीक्षण किया गया था।

Comments

आपका उदाहरण पीछे की संगतता के अर्थ में काम नहीं करता है, क्योंकि आप केवल विक्रेता उपसर्गों के अग्रणी '-' के बारे में भूल गए थे। यह होना चाहिए -webkit-background-size, -moz-background-sizeऔर इसी तरह। Developer.mozilla.org/en-US/docs/CSS/… देखें या आप इसे भविष्य के लिए शामिल करें, जैसे शॉर्टहैंड प्रॉपर्टी में भविष्य के प्रमाणbackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;

— Volker E.

यह एकमात्र समाधान था जो IE9 पर मेरे लिए काम करेगा। धन्यवाद।

— डकैती

Answer 7

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

Comments

Thats जो मैंने दूसरों को देखा एसओ प्रश्न, और काम करता है, लेकिन चूंकि सीएसएस 3 बाहर आया, मैंने सोचा कि अब यह एक बेहतर तरीका था।

— फैबियो एंट्यून्स

ब्राउज़र के उपयोग में होने वाली घटनाओं को ध्यान में रखकर हो सकता है, आप उन्हें केवल व्यावसायिक रूप से उपयोग करने में सक्षम हो सकते हैं ... 10 साल?

— किम स्टेबेल

CSS3 होने के नाते, एक संपत्ति का उपयोग करने में कुछ भी गलत नहीं है जो कि सबसे आधुनिक ब्राउज़र देखते हैं और असमर्थित ब्राउज़र को न्यूनतम मानक देते हैं। यहां, उदाहरण के लिए, आप <IE8 के लिए एक उबाऊ लेकिन स्वीकार्य टाइल पृष्ठभूमि का उपयोग करने में सक्षम हो सकते हैं और फ़ायरफ़ॉक्स / क्रोम / सफारी / ओपेरा के लिए एक सुंदर चित्र बना सकते हैं। इसके अलावा, जावास्क्रिप्ट के साथ पुराने ब्राउज़र में CSS3 की कार्यक्षमता को दोहराने के लिए कई पॉलीफ़िल हैं। दूसरे शब्दों में, इसका उपयोग करने के लिए आपको CSS3 का समर्थन करने के लिए प्रत्येक ब्राउज़र की प्रतीक्षा करने की आवश्यकता नहीं है।

— दान

बस यह अन्य पोस्ट मिली जो मालिकाना एमएस

— अल्फाइमाओलॉडर

Answer 8

इस सीएसएस का प्रयोग करें:

background: url('img.png') no-repeat; 
background-size: 100%;

Answer 9

यह सीएसएस ट्रिक्स द्वारा समझाया गया है: परफेक्ट फुल पेज बैकग्राउंड इमेज

डेमो: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

कोड:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Comments

उपर्युक्त उत्तर के आधार पर, मैंने देखा है कि मोबाइल डिवाइस और माइक्रोसॉफ़्ट एज पर बैकग्राउंड अटैचमेंट फिक्स काम नहीं करता है। सभी उपकरणों और ब्राउज़रों पर बैकग्राउंड स्ट्रेच बनाने और उन्हें ठीक करने के लिए सही समाधान jquery-backstretch.com

— Aamer Shahzad

Answer 10

आप इस वर्ग को अपनी CSS फ़ाइल में जोड़ सकते हैं।

.stretch {
    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;
}

इसमें काम आता है:

• सफ़ारी ३ या बाद की
• क्रोम जो भी या बाद में
• इंटरनेट एक्सप्लोरर 9 या बाद का
• ओपेरा 10 या बाद में (ओपेरा 9.5 समर्थित background-size, लेकिन कीवर्ड नहीं)
• फ़ायरफ़ॉक्स 3.6 या बाद में (फ़ायरफ़ॉक्स 4 गैर-विक्रेता उपसर्ग संस्करण का समर्थन करता है)

Comments

यह एक काम करने वाला "स्ट्रेच टू फिट" उत्तर है। नोट: पहलू अनुपात बदल जाएगा

— devdrc

Answer 11

कंटेनर आकार के आधार पर उचित रूप से अपनी छवियों को स्केल करने के लिए, निम्नलिखित का उपयोग करें:

background-size: contain;
background-repeat: no-repeat;

Answer 12

मैं इसका उपयोग करता हूं, और यह सभी ब्राउज़रों के साथ काम करता है:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>

Answer 13

धन्यवाद!

लेकिन तब यह Google Chrome और Safari ब्राउज़रों के लिए काम नहीं कर रहा था (जब तक काम नहीं किया गया था, लेकिन चित्रों की ऊँचाई केवल 2 मिमी थी!) , जब तक कि किसी ने मुझे यह नहीं बताया कि क्या कमी है:

सेट करने का प्रयास करें height:auto;min-height:100%;

इसलिए अपनी height:100%;लाइन के लिए यह परिवर्तन दें :

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

उस नए जोड़े गए कोड से ठीक पहले मेरे पास मेरे Drupal Tendu विषय हैं style.css:

html, शरीर {ऊँचाई: 100% ;;

#page {पृष्ठभूमि: #ffffff; ऊंचाई: ऑटो! महत्वपूर्ण; ऊंचाई: 100%; न्यूनतम ऊंचाई: 100%; स्थिति: रिश्तेदार;};

फिर मुझे जोड़ते समय चित्र के साथ ड्रुपल के भीतर एक नया ब्लॉक बनाना होगा class=stretch:

<img alt = "" वर्ग = "खिंचाव" src = "pic.url" />

बस उस Drupal ब्लॉक में संपादक के साथ एक तस्वीर कॉपी करने से काम नहीं चलता; किसी को संपादक को गैर-स्वरूपित पाठ में बदलना होगा।

Answer 14

मैं 100% चौड़ाई और ऊंचाई के साथ पूर्ण div में छवि से सहमत हूं। सुनिश्चित करें कि आपने सीएसएस में शरीर के लिए 100% चौड़ाई और ऊंचाई निर्धारित की है और मार्जिन और पैडिंग को शून्य पर सेट किया है। इस पद्धति के साथ एक और मुद्दा आपको यह मिलेगा कि पाठ का चयन करते समय, चयन क्षेत्र कभी-कभी पृष्ठभूमि की छवि को समाहित कर सकता है, जिसमें पूर्ण पृष्ठ बनाने का दुर्भाग्यपूर्ण प्रभाव होता है चयनित राज्य। आप user-select:noneसीएसएस नियम का उपयोग करके इसे प्राप्त कर सकते हैं , जैसे:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

फिर से, इंटरनेट एक्सप्लोरर यहां बुरा आदमी है, क्योंकि यह उपयोगकर्ता-चयनित विकल्प को नहीं पहचानता है - इंटरनेट एक्सप्लोरर 10 पूर्वावलोकन भी इसका समर्थन नहीं करता है, इसलिए आपके पास पृष्ठभूमि छवि चयन को रोकने के लिए जावास्क्रिप्ट का उपयोग करने का विकल्प है (उदाहरण के लिए, http : //www.felgall.com/jstip35.htm ) या CSS 3 का उपयोग कर पृष्ठभूमि-खिंचाव विधि ।

इसके अलावा, एसईओ के लिए मैं पृष्ठ के निचले भाग में पृष्ठभूमि की छवि डालूंगा, लेकिन अगर पृष्ठभूमि छवि को लोड करने में बहुत लंबा समय लगता है (जो कि शुरुआत में एक सफेद पृष्ठभूमि के साथ है), तो आप पृष्ठ के शीर्ष पर जा सकते हैं।

Comments

तब न केवल एक div का उपयोग करें, जिसमें bg को चयनित होना चाहिए

— Jacek Pietal

Answer 15

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

ऑनलाइन इमेज: ------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}

Answer 16

मैंने आदर्श स्केलिंग पृष्ठभूमि छवि को प्राप्त करने के लिए पृष्ठभूमि-एक्स सीएसएस गुणों के संयोजन का उपयोग किया।

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

इससे बैकग्राउंड हमेशा पूरी ब्राउज़र विंडो को कवर करता है और स्केलिंग के दौरान केंद्रित रहता है।

Answer 17

Backstretch प्लगइन का उपयोग करें । यहां तक ​​कि कई चित्र स्लाइड भी हो सकते हैं। यह कंटेनरों के भीतर भी काम करता है। उदाहरण के लिए इस तरह से पृष्ठभूमि का केवल एक हिस्सा पृष्ठभूमि छवि के साथ कवर किया जा सकता था।

जब से मैं यह काम करने के लिए मिल सकता है यह प्लगइन का उपयोग करने के लिए एक आसान साबित होता है :)।

Answer 18

यदि आप सामग्री को क्षैतिज रूप से केंद्रित करना चाहते हैं, तो इस तरह के संयोजन का उपयोग करें:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

यह सुंदर लगेगा।

Answer 19

इस सीएसएस का प्रयोग करें:

background-size: 100% 100%

Comments

डाउनवॉट किया गया, यह पिछले उत्तर stackoverflow.com/a/35021247/3810453

— Zanshin13

@ Zanshin13 मैं पिछले प्रश्न के बारे में नहीं जानता था। तो फिर तुम मेरे जवाब को कम करने के सवाल को बंद करने के लिए मतदान करना होगा!

— शदी शेरिफ

Answer 20

आप border-image : yourimageछवि का उपयोग सीमा तक करने के लिए कर सकते हैं। अगर आप बैकग्राउंड-इमेज देते हैं, तो भी बॉर्डर इमेज उसके ऊपर खींची जाएगी।

border-imageसंपत्ति बहुत उपयोगी है यदि आपकी शैली पत्रक कहीं जो सीएसएस 3. समर्थन नहीं करता कार्यान्वित किया जाता है आप गूगल क्रोम या फ़ायरफ़ॉक्स का उपयोग कर रहे हैं, तो है, तो मेरा सुझाव है background-size:coverसंपत्ति ही।

Answer 21

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

मैंने पहले भी ऐसा किया है, और यह उतना कठिन नहीं है। इसके अलावा, मुझे लगता है कि स्ट्रेचिंग पृष्ठभूमि की गुणवत्ता को नुकसान पहुंचाएगी। और यदि आप एक बड़ी छवि जोड़ते हैं तो यह धीमी गति से कंप्यूटर और ब्राउज़र को धीमा कर देगा।

Comments

अच्छी बात। लेकिन मैं बैकग्राउंड इमेज के लिए jpg का उपयोग कर रहा हूं, shes लगभग 1500x1000 है जो केवल 100kb से थोड़ा अधिक लेता है। लेकिन तुमने यह कैसे किया?

— फैबियो एंट्यून्स

कैसे छवि को क्षैतिज रूप से केंद्रित करने और एक ठोस रंग या एक पैटर्न के साथ छवि किनारों को नरम करने के बारे में? यह आपको एक सहज अनुकूलन करने की अनुमति देगा यदि उपयोगकर्ता के पास छवि रिज़ॉल्यूशन से अधिक है।

— मारियोरिकल जेड

लेकिन मैं चाहता हूं कि छवि पृष्ठभूमि को भर दे। आपके कहे अनुसार, जो मैं आमतौर पर करता हूं।

— फैबियो एंट्यून्स

Answer 22

निम्नलिखित ने मेरे लिए काम किया।

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

जिसने विभिन्न आयामों पर संपूर्ण पृष्ठभूमि को कवर करने का काम किया