386

क्या सीएसएस के साथ पृष्ठभूमि छवि का आकार निर्धारित करना संभव है?

मैं कुछ ऐसा करना चाहता हूं:

background: url('bg.gif') top repeat-y;
background-size: 490px;

लेकिन ऐसा लगता है कि ऐसा करना पूरी तरह से गलत है ...

css

— जोहान
स्रोत

शायद यह संभव है। देखें कैसे: Resizeable पृष्ठभूमि छवि ।

— रिकार्डो डे ला वेगा

621

सीएसएस 2

यदि आपको छवि को बड़ा बनाने की आवश्यकता है, तो आपको छवि को छवि संपादक में ही संपादित करना होगा।

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

CSS3 _{^{शक्तियों को हटा दें}}

ऐसा CSS3 में करना संभव है background-size।

सभी आधुनिक ब्राउज़र इसका समर्थन करते हैं, इसलिए जब तक आपको पुराने ब्राउज़र का समर्थन करने की आवश्यकता नहीं होती है, तब तक ऐसा करने का यही तरीका है।
_{समर्थित ब्राउज़र:}
^{मोज़िला फ़ायरफ़ॉक्स 4.0+ (गेको 2.0+), माइक्रोसॉफ्ट इंटरनेट एक्सप्लोरर 9.0+, ओपेरा 10.0+, सफारी 4.1+ (वेबकिट 532) और क्रोम 3.0+।}

.stretch{
/* Will stretch to specified width/height */
  background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
  background-size: 100% 100%;
}

.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
  background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
  background-size: Auto 150px;
}
.resize-fill-and-clip{ 
  /* Resize to fill and retain aspect ratio.
     Will cause clipping if aspect ratio of box is different from image. */ 
  background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
   Will cause gap if aspect ratio of box is different from image. */ 
  background-size: contain;
}

विशेष रूप से, मुझे ऐसे मूल्य coverऔर containमूल्य पसंद हैं जो हमें नियंत्रण की नई शक्ति प्रदान करते हैं जो हमारे पास पहले नहीं थी।

गोल

आप background-size: roundदोहराव के साथ संयोजन में एक अर्थ का उपयोग कर सकते हैं :

.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */ 
  background-size: round auto; /* Height: auto is to keep aspect ratio */
  background-repeat: repeat;
}

यह छवि की चौड़ाई को समायोजित करेगा इसलिए यह पृष्ठभूमि स्थिति क्षेत्र में कई बार फिट बैठता है।

अतिरिक्त नोट
यदि आपको जिस आकार की आवश्यकता है वह स्थिर पिक्सेल आकार है, यह वास्तविक छवि को भौतिक रूप से आकार देने के लिए अभी भी स्मार्ट है। यह दोनों आकार की गुणवत्ता में सुधार करने के लिए है (यह देखते हुए कि आपका छवि सॉफ़्टवेयर ब्राउज़र की तुलना में बेहतर काम करता है), और बैंडविड्थ को बचाने के लिए अगर मूल छवि क्या प्रदर्शित करना है से बड़ा है।

— भय
स्रोत

7

ध्यान दें कि आईपैड और आईफोन पर रेटिना डिस्प्ले का सवाल भी है और संभवत: अन्य उच्च-रिज़ॉल्यूशन वाले डिवाइस हैं। इसका मतलब यह है कि यह सीएसएस का उपयोग करके बड़ी छवियों को आकार देने और विशिष्ट छवियों की सेवा के लिए कई सीएसएस फाइलों और अन्य ट्रिक्स का उपयोग करने के लायक हो सकता है। यहाँ पर अच्छा परिचय: webmonkey.com/2012/03/…

— सिंह

यह अब तक का सबसे बुरा समाधान है, क्योंकि प्रत्येक ई-कॉमर्स दुकान छवि को फिर से आकार देने वाली नहीं है, जैसा कि सुझाव दिया गया है। 2009 में, यह सबसे अधिक संभावना सबसे अच्छा विकल्प के करीब था, अब बस नीचे की तरह आकार विशेषताओं का उपयोग करें।

— शॉनोरिली

332

केवल CSS 3 ही इसका समर्थन करता है,

background-size: 200px 50px;

लेकिन मैं छवि को स्वयं संपादित करूंगा, ताकि उपयोगकर्ता को कम लोड करने की आवश्यकता हो, और यह एंटीअलिंग के बिना सिकुड़ी हुई छवि से बेहतर लग सकता है।

— Maertz
स्रोत

32

दुर्भाग्य से, लोग अभी भी ie8

— Dean_Wilson

16

माइक्रोसॉफ्ट के लिए शर्म की बात है यह भयानक ब्राउज़र है

— महमूदव्स

2013 को समाप्त, अभी भी background: url('resized_image.png')\9;IE के लिए जोड़ने की जरूरत है 9 9

— skobaljic

यह 2017 में भी जाने का तरीका है!

— फ्रांसिस्को ओचोआ

मैं भी 2017 से आया था और हम इसे करते हैं।

— Ska

23

यदि आपके उपयोगकर्ता केवल ओपेरा 9.5+, सफारी 3+, इंटरनेट एक्सप्लोरर 9+ और फ़ायरफ़ॉक्स 3.6+ का उपयोग करते हैं तो इसका उत्तर हां में है। नहीं तो नहीं।

पृष्ठभूमि आकार संपत्ति सीएसएस 3 का हिस्सा है, लेकिन यह सबसे ब्राउज़रों पर काम नहीं करेगा।

अपने उद्देश्यों के लिए बस वास्तविक छवि को बड़ा करें।

— क्रिस्टोफर टोकर
स्रोत

1

पृष्ठभूमि का आकार: 100%; पृष्ठभूमि स्थिति: केंद्र; - यह IE6 XP होम पर मेरी वर्चुअल मशीन पर चल रहे IE6 में काम करता है।

— InnateDev

7

IE 6,7,8 'अधिकांश ब्राउज़र' नहीं है।

— महमूदवेक

1

2013 में भी - जबकि IE6 के संबंध में टिप्पणी "IE6,7,8 'सबसे ब्राउज़र नहीं है" आंशिक रूप से सच हो सकता है; IE7 और IE8 में अभी भी दुर्भाग्य से काफी कमांडिंग मार्केट शेयर है। इसका सबसे अच्छा तरीका मुझे ऐसा करना है जो आधुनिकता (या 'OLDIE) टैग करने के अन्य साधनों के संयोजन में जावास्क्रिप्ट का उपयोग करना है।

— एंड्रयूपीके

19

संभव नहीं है । पृष्ठभूमि हमेशा जितनी बड़ी हो सकती है, लेकिन आप इसे अपने आप को दोहराने से रोक सकते हैं background-repeat।

background-repeat: no-repeat;

दूसरे, पृष्ठभूमि एक बॉक्स के मार्जिन-क्षेत्र में नहीं जाती है, इसलिए यदि आप चाहते हैं कि पृष्ठभूमि केवल एक बॉक्स की वास्तविक सामग्री पर हो, तो आप पैडिंग के बजाय मार्जिन का उपयोग कर सकते हैं।

तीसरा, आप यह नियंत्रित कर सकते हैं कि पृष्ठभूमि की छवि कहां से शुरू होती है। डिफ़ॉल्ट रूप से यह एक बॉक्स का ऊपरी बाएं कोने है, लेकिन आप इसे background-positionइस तरह से नियंत्रित कर सकते हैं :

background-position: center top;

या शायद

background-position: 20px -14px;

सीएसएस स्प्राइट्स के साथ नकारात्मक स्थिति का बहुत उपयोग किया जाता है ।

— Mikl
स्रोत

नहीं, यह उतना बड़ा नहीं है जितना मैं हो सकता हूं। यह हमेशा एक ही आकार का होता है, लेकिन मुझे इसे बड़ा करने की जरूरत है।

— जोहान

खैर, यह संभव नहीं है। सीएसएस के भविष्य के संस्करणों में ऐसा करने के लिए विकल्प हो सकते हैं, लेकिन यह एक लंबा रास्ता है।

— मिकल

यह उत्तर गलत है। CSS3 की पृष्ठभूमि के आकार की संपत्ति है जो IE9 + में समर्थित है।

— डाउनपोर046

3

टाइम स्टैम्प पर नजर डालें। 2009 में, पृष्ठभूमि का आकार, लेकिन वेबकीट की आँखों में एक ट्विंकल था। यदि आप चाहें, तो इसे अपडेट करने के लिए स्वतंत्र महसूस करें, लेकिन पृष्ठभूमि के आकार का वर्णन करने वाले पहले से ही बहुत सारे उत्तर हैं।

— mikl

12

बहुत मुश्किल नहीं है, अगर आप गहराई में थोड़ा और जाने से डरते नहीं हैं :)

वहाँ एक भूल तर्क है:

background-size: contain;

यह आपके background-imageसाथ ऐसा नहीं करेगा जैसा कि यह करेगा cover। यह तब तक खिंचेगा जब तक कि बाहरी कंटेनर की चौड़ाई या ऊंचाई तक पहुंच न जाए और इसलिए यह छवि को संरक्षित करता है।

संपादित करें: वहाँ भी है -webkit-background-sizeऔर -moz-background-size।

पृष्ठभूमि के आकार की संपत्ति IE9 +, फ़ायरफ़ॉक्स 4+, ओपेरा, क्रोम और सफारी 5+ में समर्थित है।

^{- स्रोत: W3 स्कूल}

— कैसर
स्रोत

3

बैकग्राउंड-साइज़: 200px 50px इसे 100% 100% में बदल देते हैं और यह ul li या div जैसे कंटेंट टैग की ज़रूरतों को पूरा करेगा ...

— Mihai
स्रोत

3

@Tetra ने जो उत्तर दिया, उसके समर्थन में, मैं यह बताना चाहता हूं कि यदि छवि SVG है, तो वास्तविक छवि का आकार बदलना आवश्यक नहीं है।

चूंकि एक एसवीजी फाइल सिर्फ एक्सएमएल है आप इसे एक्सएमएल के भीतर प्रदर्शित करने के लिए जो भी आकार चाहें निर्दिष्ट कर सकते हैं।

हालांकि, यदि आप एक ही एसवीजी छवि का विभिन्न स्थानों पर उपयोग कर रहे हैं और इसे अलग-अलग आकार की आवश्यकता है, तो उपयोग background-sizeकरना बहुत सहायक है। SVG फाइलें वैसे भी रास्टर इमेज से स्वाभाविक रूप से छोटी होती हैं और CSS के साथ फ्लाई पर आकार बदलना किसी भी प्रदर्शन लागत के बिना बहुत मददगार हो सकता है जिससे मैं परिचित हूं, और निश्चित रूप से गुणवत्ता में कोई कमी नहीं है।

यहाँ एक त्वरित उदाहरण है:

<div class="hasBackgroundImage">content</div>

.hasBackgroundImage
{
    background: transparent url('/image/background.svg') no-repeat 10px 5px;
    background-size: 1.4em;
}

(नोट: यह मेरे लिए OS X 10.7 में Firefox 8, Safari 5.1 और Chrome 16.0.912.63 के साथ काम करता है)

— SunSparc
स्रोत

3

आप पूरी तरह से CSS3 के साथ कर सकते हैं:

body {
    background-image: url(images/bg-body.png); 
    background-size: 100%; /* size the background image at 100% like any responsive img tag */
    background-position: top center;
    background-repeat:no-repeat;
 }

यह बॉडी एलिमेंट की चौड़ाई के 100% बैकग्राउंड इमेज को आकार देगा और फिर बॉडी एलिमेंट को छोटे रिज़ॉल्यूशन के लिए री-साइज़ के अनुसार बैकग्राउंड री-साइज़ करेगा।

यहाँ उदाहरण है: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/

— माइक सिंकुला
स्रोत

2

बस नेस्ट डिव को क्रॉस ब्राउज़र संगत होना चाहिए

   
      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            Put content here
         </div>
      </div>

— कॉर्नेलियस लैम्ब
स्रोत

2

आप दो <div>तत्वों का उपयोग कर सकते हैं :

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

निहित div को फिर से सेट किया जाना है absolute। इस तरह से यह युक्त div में वस्तुओं के सामान्य प्रवाह में हस्तक्षेप नहीं करता है।

यह आपको प्रभावी ढंग से स्प्राइट छवियों का उपयोग करने में सक्षम बनाता है।

— बेन शोमर
स्रोत

1

आप CSS (2.1) के वर्तमान संस्करण के साथ अपनी पृष्ठभूमि छवि का आकार निर्धारित नहीं कर सकते।

आप केवल सेट कर सकते हैं: position, fix, image-url, repeat-mode, और color।

— Knittl
स्रोत

1

put the below code in the body of you css file

background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;

— श्वेता एसएच
स्रोत

1

आप लिख चुके हैं

background: url('bg.gif') top repeat-y;    
background-size: 490px;

लेकिन आपको केवल कंटेनर के आकार के आधार पर पृष्ठभूमि दिखाई देगी।

यदि आपके पास पृष्ठभूमि url के साथ एक खाली कंटेनर है और पृष्ठभूमि का आकार कुछ भी है, तो आप bg.gif नहीं देखेंगे।

यदि आप महाद्वीप का आकार निर्धारित करते हैं

background: url('bg.gif') top repeat-y;    
background-size: 490px;
height: 490px;
width: 490px;

आपके द्वारा ऊपर लिखे गए कोड के साथ, आप bg.gif फ़ाइल देख पाएंगे।

— कार्लोस कैला
स्रोत

0

background-size Chrome 4.1 में काम कर रहा है, लेकिन अभी तक मैं इसे फ़ायरफ़ॉक्स 3.6 में काम नहीं कर सका।

— silversky
स्रोत

0

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

स्टाइल शीट में:

#v2menu-home {
    background-image:url(../v2-siteimages/button.png);
    background-repeat:no-repeat;
}

HTML दस्तावेज़ में:

<div id="v2menu">
    <a id="v2menu-home" href="/index.php">home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div><!-- v2menu -->

— मार्टिन थॉम्पसन
स्रोत

2

दूसरा तरीका पृष्ठभूमि छवि के आकार के लिंक का आकार निर्धारित करना है। स्टाइल शीट में, (ऊपर के उदाहरण में # v2menu- होम के तहत) प्रदर्शन का उपयोग करें: ब्लॉक और वहां की ऊंचाई और चौड़ाई सेट करें। जो वास्तव में काम करता है। तब नॉन-ब्रेकिंग स्पेस कैरेक्टर की जरूरत नहीं।

— मार्टिन थॉम्पसन

0

उदाहरण के लिए:
पृष्ठभूमि छवि हमेशा कंटेनर आकार (चौड़ाई 100% और ऊंचाई 100px) के लिए फिट होगी।
क्रॉस-ब्राउज़र CSS:

.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;

}

— skyrosbit
स्रोत

0

यह CSS3 में पृष्ठभूमि-आकार के साथ करना संभव है

.backgroungImage {
    background: url('../imageS/background.jpg') no-repeat;
    background-size: 32px 32px;
}

— ओमकार खाडे
स्रोत

0

यदि आप background-sizeउसी backgroundसंपत्ति में सेट करना चाहते हैं जिसका आप उपयोग कर सकते हैं:

background:url(my-bg.png) no-repeat top center / 50px 50px;

— रत्न टाटा
स्रोत

मैं परीक्षण नहीं कर सकता, लेकिन शायद।

— रातटाटा टाटा

मैंने सोचा कि

— आईपैड्स

सीएसएस के साथ पृष्ठभूमि छवि पर आकार सेट करें?

सीएसएस 2

CSS3 शक्तियों को हटा दें

गोल

बहुत मुश्किल नहीं है, अगर आप गहराई में थोड़ा और जाने से डरते नहीं हैं :)

CSS3 _{^{शक्तियों को हटा दें}}