CSS3 ग्रेडिएंट बैकग्राउंड सेट बॉडी पर स्ट्रेच नहीं होता है, बल्कि दोहराता है?

429

ठीक है <body>योग के अंदर की सामग्री 300px ऊँची है।

अगर मैं अपने <body>उपयोग की पृष्ठभूमि सेट करता हूं -webkit-gradientया-moz-linear-gradient

फिर मैं अपनी खिड़की को अधिकतम करता हूं (या बस इसे 300px से अधिक लंबा करता हूं) ढाल बिल्कुल 300px लंबा (सामग्री की ऊंचाई) होगा और बस बाकी खिड़की को भरने के लिए दोहराएगा।

मुझे लगता है कि यह एक बग नहीं है क्योंकि यह वेबकिट और गेको दोनों में समान है।

लेकिन क्या विंडो को दोहराने के बजाय ढाल भरने के लिए ढाल बनाने का एक तरीका है?

css gradient

— जद इसाक्स
स्रोत

717

निम्नलिखित सीएसएस लागू करें:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

संपादित करें: जोड़ा margin: 0;टिप्पणी प्रति शरीर घोषणा (करने के लिए मार्टिन )।

संपादित करें:background-attachment: fixed; प्रति टिप्पणी ( जोहे ग्रीन ) शरीर की घोषणा में जोड़ा गया ।

— ब्रायन डाउनिंग
स्रोत

4

मैं भी पता चला कि मैं जोड़ने के लिए की जरूरत margin:0;पर bodyवरना मैं अपने पृष्ठ के तल पर एक अंतर मिला है।

— मार्टिन

8

क्रोम और सफारी में, शरीर {ऊँचाई: 100%} पृष्ठ में परिणाम (लेकिन ढाल नहीं) व्यूपोर्ट से बाहर फैली हुई है।

— thSoft

13

मुझे एक पृष्ठभूमि-जुड़ाव जोड़ना था: निश्चित; शरीर से नीचे की खाई (वेबकिट) से छुटकारा पाने के लिए।

— j7nn7k

4

बॉडी के लिए बैकग्राउंड सेट करना और फिर html टैग की ऊंचाई 100% करना इंटरनेट एक्सप्लोरर में अजीब काम करता है। यहाँ एक उदाहरण (png) है।

— जस्टिन फोर्स

21

सुनिश्चित करें कि background-repeatऔर अपने नियमों के बादbackground-attachment आते हैं। अन्यथा, पृष्ठभूमि अभी भी दोहरा सकती है। background

— केलन

159

, पिछले एक जवाब के बारे में स्थापित करने htmlऔर bodyकरने के लिए height: 100%करता है, तो सामग्री की जरूरत स्क्रॉल करने के लिए काम करने के लिए प्रतीत नहीं होता। fixedपृष्ठभूमि को जोड़ने से लगता है कि ठीक करने के लिए - नहींneed for height: 100%;

उदाहरण के लिए:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

स्निपेट का विस्तार करें

— जोशुआ रुड
स्रोत

5

इसने मेरे लिए हर उस ब्राउजर पर काम किया, जिसका मैंने परीक्षण किया (क्रोम [मैक], सफारी [मैक], फ़ायरफ़ॉक्स [मैक / विन 7], आईई 9 [विन 7] और ओपेरा [मैक] "स्क्रॉल: 100%" के साइडबार प्रभाव के बिना। समाधान। धन्यवाद!

— पाइपवर्क्स

7

सास / कम्पास का उपयोग करने वाले लोगों के लिए एक नोट। आप मिश्रण को सीधे "फिक्स्ड" में सेट नहीं कर सकते हैं, इसलिए निश्चित करने के लिए आप संपत्ति जोड़ेंbackground-attachment: fixed

— काइल मैथ्यू

2

यदि आप चाहते हैं कि या तो पृष्ठभूमि खिड़की से भरे, या सामग्री (जो भी अधिक हो) तो उपयोग करें min-height:100%(संगत ब्राउज़रों में)

— cjk

मैं कम्पास का उपयोग करके निम्नलिखित कोड को निष्पादित करने में सक्षम था: @include पृष्ठभूमि (रैखिक-ढाल (शीर्ष, लाल 0%, नीला 100%) तय);

— mcranston18

मैं तीसरा रंग कैसे जोड़ूंगा?

— सबडेन

17

मुझे पता है कि मुझे पार्टी में देर हो रही है, लेकिन यहाँ एक और ठोस जवाब है।

आपको बस इसके min-height: 100%;बजाय उपयोग करने की आवश्यकता है height: 100%;और आपकी ढाल पृष्ठभूमि दोहराए बिना व्यूपोर्ट की पूरी ऊंचाई का विस्तार करेगी, भले ही सामग्री स्क्रॉल योग्य हो।

ऐशे ही:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}

— रिकार्डो ज़िया
स्रोत

जब तक आपको html ऊँचाई 100% पर सेट करने की आवश्यकता नहीं है, उदाहरण के लिए यदि आपको चिपचिपा पाद की आवश्यकता है

— एपिफेन्फोर्ट

15

यहां मैंने इस समस्या को हल करने के लिए क्या किया है ... यह सामग्री की पूरी लंबाई के लिए ढाल दिखाएगा, फिर पृष्ठभूमि रंग (आमतौर पर ढाल में अंतिम रंग) में वापसी होगी।

   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }

<body>
  <h1>Hello world!</h1>
</body>

स्निपेट का विस्तार करें

मैंने इसे फायरफॉक्स 3.6, सफारी 4 और क्रोम में परीक्षण किया है, मैं किसी भी ब्राउज़र के लिए शरीर में पृष्ठभूमि-रंग रखता हूं जो किसी कारण से HTML टैग को स्टाइल करने का समर्थन नहीं करता है।

— जॉन सैनफोर्ड
स्रोत

13

सेटिंग html { height: 100%}IE के साथ कहर बरपा सकती है। यहाँ एक उदाहरण (png) है। लेकिन आप जानते हैं कि क्या काम करता है? बस अपनी पृष्ठभूमि <html>टैग पर सेट करें ।

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

पृष्ठभूमि नीचे तक फैली हुई है और कोई अजीब स्क्रॉलिंग व्यवहार नहीं होता है। आप अन्य सभी सुधारों को छोड़ सकते हैं। और यह मोटे तौर पर समर्थित है। मुझे एक ब्राउज़र नहीं मिला है जो आपको html टैग की पृष्ठभूमि लागू नहीं करने देता। यह पूरी तरह से वैध सीएसएस है और कुछ समय के लिए है। :)

— जस्टिन फोर्स
स्रोत

1

@ लिंडा यह बहुत उपयोगी प्रतिक्रिया नहीं है। क्या आप एक ऐसा मामला प्रदान करना चाहेंगे, जहाँ यह काम न करे?

— जस्टिन फोर्स

अस्पष्ट होने के लिए क्षमा करें। मैं अनिश्चित हूं कि यह काम क्यों नहीं करता है। आप एक ढाल जोड़ सकते हैं, htmlलेकिन यह मेरे मामले में पृष्ठ के नीचे का रास्ता बंद कर देता है। जोड़ने background-attachment:fixedसे समस्या हल हो जाती है। मैंने देखा है कि यह एक से अधिक साइटों पर होता है लेकिन इसका कारण खोजने में सक्षम नहीं है।

— L84

इस समाधान की बात यह है कि इसने 2012 में (वैसे,) ब्राउज़रों में काम किया। लेकिन आप अभी भी संकेत नहीं करते हैं कि आप किस ब्राउज़र के बारे में बात कर रहे हैं। यदि आपको अभी भी परेशानी हो रही है, तो जोड़ने का प्रयास करें html, body { height: 100%; }।

— जस्टिन फोर्स

सच। यह फ़ायरफ़ॉक्स और क्रोम में होता है (अन्य ब्राउज़रों में परीक्षण नहीं किया गया है) और मैंने बिना किसी भाग्य (पृष्ठभूमि-अनुलग्नक को छोड़कर) में ऊँचाई और विभिन्न अन्य सेटिंग्स की कोशिश की। ओह ठीक है, कोई बड़ी बात नहीं है और उम्मीद है कि आपका जवाब अभी भी अधिकांश के लिए काम करता है। =>

— L84

फिर भी बिना किसी दोहराव और नियत के साथ मूर्ख बनाना होगा।

— मार्संडबैक

12

इस पृष्ठ पर बहुत सारी आंशिक जानकारी है, लेकिन पूर्ण नहीं है। ये है जो मैं करता हूं:

यहां एक ढाल बनाएं: http://www.colorzilla.com/gradient-editor/
BODY के बजाय HTML पर ग्रेडिएंट सेट करें।
HTML पर "पृष्ठभूमि-अनुलग्नक: निश्चित" के साथ पृष्ठभूमि को ठीक करें;
BODY पर ऊपर और नीचे के मार्जिन को बंद करें
(वैकल्पिक) मैं आमतौर पर एक <DIV id='container'>ऐसी सामग्री बनाता हूं, जिसमें मैं अपनी सारी सामग्री डाल देता हूं

यहाँ एक उदाहरण है:

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

यह विभिन्न आकारों और स्क्रॉलिंग आवश्यकताओं के पृष्ठों पर IE, क्रोम और फ़ायरफ़ॉक्स के साथ परीक्षण किया गया है।

— रिक स्मिथ
स्रोत

1

महान! मैं colorzilla का उपयोग कर रहा था और मुख्य उत्तर मेरे लिए काम नहीं कर रहा था। यह एक किया। धन्यवाद! :)

— फिल्लीन

आपकी वरीयता HTML पर करने के लिए क्यों है, BODY पर नहीं?

— शशिकेविच

@ शशिकेविच महान प्रश्न। मैंने शायद ही इस जवाब को 5 साल में देखा हो इसलिए मुझे बिल्कुल याद नहीं है। कारण यह है कि मैंने अभी भी सभी ब्राउज़र अपडेट के साथ लागू नहीं किया है। यदि आप इसे पूरे शरीर में स्थानांतरित कर देते हैं, तो मैं उत्सुक होगा यदि यह समान काम करता है।

— रिक स्मिथ

@ रिकस्मिथ नोप, मैंने html स्टाइल किया। लेकिन, मैंने बॉडी पर लागू होने वाले नियमों को अभी जांचने के लिए स्थानांतरित किया, और इससे कोई फर्क नहीं पड़ा। शायद यह एक पुरानी ब्राउज़र की बात थी ...

— sashaikevich

4

गंदा; शायद आप सिर्फ एक मिनट की ऊंचाई जोड़ सकते हैं: 100%; HTML और बॉडी टैग के लिए? वह या कम से कम एक डिफ़ॉल्ट पृष्ठभूमि रंग सेट करें जो अंत में ढाल रंग भी है।

— subv3rsion
स्रोत

1

अंतिम ग्रेडिएंट रंग के रूप में सेट की गई डिफ़ॉल्ट पृष्ठभूमि यदि ग्रेडिएंट बंद हो जाती है, तो यह एक महान समाधान होगा, लेकिन यह केवल इसे दोहराता नहीं है इसलिए डिफ़ॉल्ट पृष्ठभूमि केवल तभी दिखाई देगी यदि ग्रेडर असमर्थित हो।

— जेडी इसाक्स

2

मुझे यहां काम करने के लिए उत्तर प्राप्त करने में परेशानी हुई।
मैंने पाया कि शरीर में एक पूर्ण-आकार के डिव को ठीक करने के लिए बेहतर काम किया, इसे एक नकारात्मक जेड-इंडेक्स दिया, और इसके लिए ढाल संलग्न किया।

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

यहां देखें पूरा नमूना https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

— morefromalan
स्रोत

0

मैंने इस CSS कोड का उपयोग किया है और इसने मेरे लिए काम किया है:

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

एक संबंधित जानकारी यह है कि आप http://www.colorzilla.com/gradient-editor/ पर अपने महान ग्रेडिएंट बना सकते हैं

/ स्टेन

— Netsi1964
स्रोत

-1

background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;

— जो
स्रोत

1

कृपया अपने समाधान के प्रमुख पहलुओं पर कुछ स्पष्टीकरण जोड़ें।

— रचछा

-1

यह जो मैंने किया है:

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

इससे पहले कि मैं शरीर पर तैरता, शीर्ष पर एक अंतर था, और यह html का पृष्ठभूमि रंग दिखा रहा था। अगर मैं html के bgcolor को हटाता हूं, जब मैं नीचे स्क्रॉल करता हूं, तो ग्रेडिएंट कट जाता है। इसलिए मैंने बॉडी मंगाई और इसे 100% की चौड़ाई और सापेक्षता के लिए निर्धारित किया। यह सफारी, क्रोम, फ़ायरफ़ॉक्स, ओपेरा, इंटरनेट पर काम किया .. ओह रुको। : पी

आप लोग क्या सोचते हैं?

— grizzy
स्रोत

-4

100% के बजाय मैं अभी कुछ पिक्सकेल मिलाता हूँ और यह बिना गैप के पूरे पेज के लिए काम करता है:

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

— SANDER
स्रोत

3

> 1420 पीएक्स ऊंचाई वाले पृष्ठों के बारे में क्या?

— veritas