एक <div> तत्व के लिए एक पृष्ठभूमि छवि जोड़ना

170

क्या एक <div>तत्व बनाना संभव है जिसमें पृष्ठभूमि छवि शामिल है, और यदि हां, तो मैं यह करने के बारे में कैसे जाऊंगा?

html

204

आपका मतलब इससे है?

<style type="text/css">
.bgimg {
    background-image: url('../images/divbg.png');
}
</style>

...

<div class="bgimg">
    div with background
</div>

— phoibos
स्रोत

क्या मैं इसे गैर-दोहराने योग्य सेट कर सकता हूं?

— वैलेंटिनो रु

12

हां: बैकग्राउंड-रिपीट: नो-रिपीट; w3schools.com/cssref/pr_background-repeat.asp

— मैट बेकर

42

आप ऐसा कर सकते हैं कि CSS के backgroundप्रॉपर्टीज़ का उपयोग किया जाए। इसे करने के कुछ तरीके हैं:

आईडी द्वारा

HTML: <div id="div-with-bg"></div>

सीएसएस :

#div-with-bg
{
    background: color url('path') others;
}

कक्षा द्वारा

HTML: <div class="div-with-bg"></div>

सीएसएस :

.div-with-bg
{
    background: color url('path') others;
}

HTML में (जो बुराई है)

HTML: <div style="background: color url('path')"></div>

कहां :

रंग हेक्स में रंग है या X11 कलर्स में से एक है
पथ छवि के लिए पथ है
दूसरों की स्थिति, अटैचमेंट

background CSS प्रॉपर्टी उस सिंटैक्स में सभी पृष्ठभूमि-xxx प्रॉपर्टीज का एक कनेक्शन है:

पृष्ठभूमि : पृष्ठभूमि-रंग पृष्ठभूमि-छवि पृष्ठभूमि-दोहराव पृष्ठभूमि-अनुलग्नक पृष्ठभूमि-स्थिति ;

स्रोत: w3schools

— Robik
स्रोत

मैं HTML विधि का उपयोग करना चाहता हूं, लेकिन क्या यह संभव है, केवल उस पद्धति का उपयोग करके, अलग-अलग स्थित 2 छवियों को जोड़ने के लिए। मुझे पता है कि कुछ करना संभव है: पृष्ठभूमि-छवि: url ("image.jpg"), url ("image2"); लेकिन ऐसा करने से, दोनों चित्र एक ही स्थान पर होंगे, थोड़े एक दूसरे को "ओवरलेइंग" करेंगे, और मैं उनके लिए अलग-अलग स्थिति निर्धारित करना चाहता हूं।

— पॉल

32

हां :

<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>

— Chamak
स्रोत

14

बिना दोहराए केंद्रित छवि प्राप्त करने के लिए इस शैली का उपयोग करें।

.bgImgCenter{
    background-image: url('imagePath');
    background-repeat: no-repeat;
    background-position: center; 
    position: relative;
}

HTML में, अपनी div के लिए इस शैली को सेट करें:

<div class="bgImgCenter"></div>

— jegadeesh
स्रोत

10

का उपयोग करें ..

<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>

— आनंद थंगप्पन
स्रोत

निश्चित रूप से पथ एकल उद्धरण में होना चाहिए ??

— शेन जी

7

आप बस आईडी के साथ एक img src विशेषता जोड़ सकते हैं:

<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>

और आपकी सीएसएस फ़ाइल (स्ट्रेच बैकग्राउंड) में:

#backgroundimage
{
   height: auto;
   left: 0;
   margin: 0;
   min-height: 100%;
   min-width: 674px;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: -1;
}

— एडम सैंडलर
स्रोत

2

सवाल एक पृष्ठभूमि तत्व को एक div में जोड़ने के बारे में है, एक अलग img विशेषता को नहीं जोड़ना है ताकि यह प्रश्न का उत्तर प्रदान न करे।

— दीपेन शाह

3

हालांकि यह समाधान प्रश्न का ठीक से उत्तर नहीं देता है, लेकिन इसने मुझे एक और मुद्दे के लिए एक विचार दिया जो मैं इस लिए सामना कर रहा था कि मैं अपना धन्यवाद प्रदान करता हूं।

— स्ट्राइकर

6

<div class="foo">Foo Bar</div>

और अपनी सीएसएस फ़ाइल में:

.foo {
    background-image: url("images/foo.png");
}

— डारिन दिमित्रोव
स्रोत

2

<div id="imgg">Example to have Background Image</div>

हमें स्टाइल टैग में नीचे दी गई सामग्री को जोड़ने की आवश्यकता है:

.imgg(

   background-image: url('C:\Users\ajai\Desktop\10.jpg');

)

— Guvaliour
स्रोत

आपका स्थानीय पथ: C: \ Users \ ajai \ Desktop \ 10.jpg कभी भी ऑनलाइन काम नहीं करने वाला है;)

— लगभग 21

सिर्फ शेक के लिए मैं यह रास्ता देता

— हूं

0

अधिकांश भाग के लिए, विधि पूरे शरीर को सेट करने के समान है

.divi{
    background-image: url('path');
}

</style>

<div class="divi"></div>

— विंस्टन ब्राउन
स्रोत