<ডিভ> উপাদানটিতে একটি পটভূমি চিত্র যুক্ত করা

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

আপনি সিএসএসের প্রস্তাবগুলি ব্যবহার করে এটি করতে পারেন background। এটি করার কয়েকটি উপায় রয়েছে:

আইডি দ্বারা

এইচটিএমএল: <div id="div-with-bg"></div>

সিএসএস :

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

ক্লাস দ্বারা

এইচটিএমএল: <div class="div-with-bg"></div>

সিএসএস :

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

এইচটিএমএলে (যা মন্দ)

এইচটিএমএল: <div style="background: color url('path')"></div>

কোথায় :

রঙ হেক্সে রঙ বা এক্স 11 রঙের একটি
পাথ ইমেজের পথ
অবস্থান, সংযুক্তি পছন্দ অন্যদের

background সিএসএস সম্পত্তি synt সিনট্যাক্সের সমস্ত পটভূমি-এক্সএক্সএক্সএক্স प्रस्तावগুলির সংযোগ

ব্যাকগ্রাউন্ড : ব্যাকগ্রাউন্ড-কালার ব্যাকগ্রাউন্ড-ইমেজ ব্যাকগ্রাউন্ড-পুনরাবৃত্তি ব্যাকগ্রাউন্ড-সংযুক্তি পটভূমি-অবস্থান ;

সূত্র: w3schools

— Robik
সূত্র

আমি এইচটিএমএল পদ্ধতিটি ব্যবহার করতে চাই, তবে কেবলমাত্র সেই পদ্ধতিটি ব্যবহার করে পৃথকভাবে অবস্থিত 2 টি চিত্র যুক্ত করতে এটি কি সম্ভব? আমি জানি যে এরকম কিছু করা সম্ভব: ব্যাকগ্রাউন্ড-চিত্র: url ("image.jpg"), ইউআরএল ("চিত্র 2"); তবে এটি করার ফলে উভয় চিত্র একই জায়গায় থাকবে, একে অপরকে "ওভারলেলিং" করবে এবং আমি তাদের জন্য আলাদা অবস্থান নির্ধারণ করতে চাই।

— পলপি 1

32

হ্যাঁ :

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

— ফ্ল্যাশ
সূত্র

14

পুনরাবৃত্তি ছাড়াই একটি কেন্দ্রিক পটভূমি চিত্র পেতে এই শৈলীটি ব্যবহার করুন।

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

এইচটিএমএলে, আপনার ডিভের জন্য এই স্টাইলটি সেট করুন:

<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

আপনি কেবল আইডি সহ একটি ইমগ এসসিআর অ্যাট্রিবিউট যুক্ত করতে পারেন:

<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

প্রশ্নটি একটি ডিভের সাথে একটি পটভূমি উপাদান যুক্ত করার বিষয়ে, একটি পৃথক ইমগ বৈশিষ্ট্য যুক্ত না করে যাতে এটি প্রশ্নের উত্তর সরবরাহ করে না।

— দীপেন শাহ

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
সূত্র

আপনার স্থানীয় পথ: সি: \ ব্যবহারকারীরা \ আজাই \ ডেস্কটপ \ 10.jpg কখনও অনলাইনে কাজ করবে না;)

— অলমোস্টপিট

কেবল

— কাঁপানোর

0

বেশিরভাগ অংশে, পদ্ধতিটি পুরো শরীরটি সেট করার মতো

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

</style>

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

— উইনস্টন ব্রাউন
সূত্র