क्या मेरे पास CSS का उपयोग करके कई पृष्ठभूमि चित्र हो सकते हैं?

316

क्या दो पृष्ठभूमि चित्र होना संभव है? उदाहरण के लिए, मैं शीर्ष पर एक छवि दोहराना चाहता हूं (दोहराना- x), और पूरे पृष्ठ पर एक और दोहराना (दोहराना), जहां पूरे पृष्ठ में एक पीछे है जो शीर्ष पर दोहराता है।

मैंने पाया है कि मैं html और शरीर की पृष्ठभूमि सेट करके दो पृष्ठभूमि छवियों के लिए वांछित प्रभाव प्राप्त कर सकता हूं:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

क्या यह "अच्छा" सीएसएस है? क्या कोई बेहतर तरीका है? और क्या होगा अगर मुझे तीन या अधिक पृष्ठभूमि चित्र चाहिए?

css background-image

— रूड ज़्वोलिंस्की
स्रोत

377

CSS3 इस प्रकार की अनुमति देता है और यह इस तरह दिखता है:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

सभी प्रमुख ब्राउज़रों के वर्तमान संस्करण अब इसका समर्थन करते हैं , हालांकि यदि आपको IE8 या उससे नीचे का समर्थन करने की आवश्यकता है, तो आप इसके चारों ओर काम करने का सबसे अच्छा तरीका अतिरिक्त divs कर सकते हैं:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

— nickf
स्रोत

27

एकाधिक पृष्ठभूमि फ़ायरफ़ॉक्स, क्रोम, सफारी और ओपेरा के नवीनतम संस्करणों द्वारा समर्थित हैं। यह IE9 में भी समर्थित होगा। en.wikipedia.org/wiki/…

— asटाइम विदेस

4

और यदि आप अलग-अलग रिपीट / पोजीशन सेटिंग्स करना चाहते हैं तो आप ऐसा कर सकते हैं: css3.info/preview/multiple-backgrounds

— Krisc

2

IE8 - IE6 के लिए, आप PIE.js. का उपयोग कर सकते हैं webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…

— Aleš Kotnik

1

क्या पृष्ठभूमि-आकार इसी नियम का पालन करता है? मैं चाहता हूं कि मेरी पृष्ठभूमि की सभी छवियां पूर्ण ऊंचाई पर हों, उनमें से एक को छोड़कर (जो मैं छवि ऊंचाई होना चाहता हूं)।

— mtmurdock

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

— Cannicide

35

सबसे आसान तरीका है कि मैंने एक ही कोड में दो अलग-अलग पृष्ठभूमि छवियों का उपयोग करने के लिए पाया है:

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

जाहिर है, यह केवल वेबसाइट के शरीर के लिए नहीं होता है, आप इसका उपयोग किसी भी डिव के लिए कर सकते हैं।

उम्मीद है की वो मदद करदे! मेरे ब्लॉग पर एक पोस्ट है जो इस बारे में गहराई से बात करता है अगर किसी को और निर्देशों या सहायता की आवश्यकता है - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div ।

— TheLibzter
स्रोत

ध्यान दें कि यह केवल पृष्ठभूमि के साथ काम करता है और पृष्ठभूमि-छवि के साथ नहीं

— योएल हैल्ब

24

इसे इस्तेमाल करो

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

पृष्ठभूमि-स्थिति के साथ आपको हर छवि स्थिति को समायोजित करने का एक सरल तरीका: और पृष्ठभूमि-दोहराने के साथ दोहराने की संपत्ति सेट करें: प्रत्येक छवि के लिए व्यक्तिगत रूप से

— code.rider
स्रोत

13

एफएफ और आईई और कुछ अन्य ब्राउज़रों का वर्तमान संस्करण एकल सीएसएस 2 घोषणा में कई पृष्ठभूमि छवियों का समर्थन करता है। यहाँ देखें http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ और यहाँ http://www.quirksmode.org/css/multiple_backgrounds.html और यहाँ http: / /nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

IE के लिए, आप एक व्यवहार जोड़ने पर विचार कर सकते हैं। यहां देखें: http://css3pie.com/

— शैनन
स्रोत

4

हां, यह संभव है, और लोकप्रिय प्रयोज्य परीक्षण वेबसाइट सिल्वरबैक द्वारा लागू किया गया है । यदि आप स्रोत कोड के माध्यम से देखते हैं तो आप देख सकते हैं कि पृष्ठभूमि कई छवियों से बनी है, एक दूसरे के ऊपर रखी गई है।

यहाँ लेख दिखा रहा है कि कैसे प्रभाव को विटामिन पर पाया जा सकता है । इन 'प्याज त्वचा' की परतों को लपेटने की एक समान अवधारणा ए लिस्ट के अलावा मिल सकती है ।

— माइक बी
स्रोत

4

यदि आप कई पृष्ठभूमि चित्र चाहते हैं, लेकिन उन्हें ओवरलैप नहीं करना चाहते हैं, तो आप इस CSS का उपयोग कर सकते हैं:

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

इस HTML संरचना के साथ:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>

— राहेल
स्रोत

2

#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

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

हम CSS3 का उपयोग करके आसानी से कई चित्र जोड़ सकते हैं। हम यहां विस्तार से पढ़ सकते हैं http://www.w3schools.com/css/css3_backgrounds.asp

— रिंकू
स्रोत

1

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

— सीन जेम्स
स्रोत