একটি ডিভের মধ্যে কীভাবে একটি (পটভূমি) চিত্রটি কেন্দ্র করবেন?

Question

একটি ডিভ মধ্যে একটি পটভূমি চিত্র কেন্দ্র করা সম্ভব? আমি সবকিছু সম্পর্কে ঠিক চেষ্টা করেছি - তবে কোনও সাফল্য নেই:

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

এটা কি সম্ভব?

Answer 1

#doit {
    background: url(url) no-repeat center;
}

Comments

ধন্যবাদ। কেন্দ্রীকরণের জন্য নির্দিষ্ট সিএসএস হ'ল "পটভূমি-অবস্থান: কেন্দ্র;"

— বিকাল

@ গ্রীন: স্প্রাইট ব্যাকগ্রাউন্ড চিত্রগুলির জন্য আমার উত্তর দেখুন।

— ক্লেটন

আপনি যদি পুরো ডিভিটি চিত্রটি পূর্ণ করতে চান এবং কোনও অতিরিক্ত স্থান ব্যবহার করা উচিত নয় আপনি background-size: cover; যদি চিত্রটির কোনও অংশ না কেটে বা প্রসারিত করে পুরো চিত্রটি প্রদর্শন করতে চান তবে আপনি ব্যবহার করতে চানbackground-size: contain;

— Zlerp

Answer 2

চেষ্টা background-position:center;

সম্পাদনা: যেহেতু এই প্রশ্নটি প্রচুর দর্শন পেয়েছে, তাই এটি অতিরিক্ত কিছু তথ্য যুক্ত করার মতো:

text-align: center ব্যাকগ্রাউন্ড চিত্র নথির অংশ নয় এবং তাই প্রবাহের অংশ নয় বলে কাজ করবে না।

background-position:centerসংক্ষিপ্ত জন্য background-position: center center; ( background-position: horizontal vertical);

Comments

আসলে আপনার কেবল দরকারbackground-position:center;

— ডেভ সাগ

নির্বাচিত উত্তরের কারণে আমার পুরো পটভূমিটি কোনও কারণে অদৃশ্য হয়ে যায় (নিখুঁতভাবে আমি কিছু jquery স্টাফ করছি যা এর কারণ হতে পারে?), তবে এই উত্তরটি কার্যকর করে। ভোট দিন।

— বুয়ুগি

Answer 3

পটভূমি-অবস্থান ব্যবহার করুন:

background-position: 50% 50%;

Comments

আপনার যদি ছবিটি অনুভূমিকভাবে কেন্দ্রিক কিন্তু শীর্ষে উল্লম্বভাবে প্রয়োজন হয় তবে দরকারী: পটভূমি-অবস্থান: 50% 0%;

— সাবস্টিয়ান জিকুয়েল

50% 0 এর চেয়ে কম হয় ;-) সিএসএসে, কখনই কোনও ইউনিটের দরকার হয় না যখন মান 0 হয়

— ক্যাপসুল

Answer 4

ব্যাকগ্রাউন্ড চিত্রটি কেন্দ্র বা অবস্থানের জন্য আপনার background-positionসম্পত্তি ব্যবহার করা উচিত । ব্যাকগ্রাউন্ড-পজিশনের বৈশিষ্ট্যটি উপাদানটির topএবং leftপাশের দিক থেকে একটি পটভূমি চিত্রের প্রারম্ভিক অবস্থান সেট করে । সিএসএস সিনট্যাক্সটি হ'ল background-position : xvalue yvalue;।

"xvalue" এবং "yvalue" সমর্থিত মানগুলি দৈর্ঘ্যের একক pxএবং শতাংশ এবং দিকের নাম যেমন বাম, ডান এবং ইত্যাদি।

"Xvalue" ব্যাকগ্রাউন্ডের অনুভূমিক অবস্থান এবং উপাদানটির শীর্ষ থেকে শুরু হয়। এর অর্থ আপনি যদি 50pxএটি ব্যবহার করেন তবে এটি উপাদানগুলির শীর্ষ থেকে "50px" দূরে থাকবে। এবং "yvalue" হ'ল উল্লম্ব অবস্থান যা একই অবস্থা।

সুতরাং আপনি যদি background-position: center;আপনার ব্যাকগ্রাউন্ড চিত্র ব্যবহার করেন তবে কেন্দ্রিক হবে।

তবে আমি সর্বদা এই কোডটি ব্যবহার করি:

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

আমি জানি এটি এত বিভ্রান্তিকর তবে এর অর্থ:

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

এবং আমি জানি যে এটিও background-sizeএকটি নতুন সম্পত্তি এবং সংকুচিত কোডে যা আছে /coverতবে এই কোডগুলির অর্থ fillউইন্ডোজ ডেস্কটপ ব্যাকগ্রাউন্ডে ব্যাকগ্রাউন্ড সাইজিং এবং অবস্থান নির্ধারণ করা।

আপনার সম্পর্কে আরো বিবরণ দেখতে পারেন background-positionমধ্যে এখানে এবং background-sizeমধ্যে এখানে ।

Answer 5

যদি আপনার ব্যাকগ্রাউন্ড চিত্রটি উল্লম্বভাবে প্রান্তিকিত স্প্রাইট শীট হয় তবে আপনি প্রতিটি স্প্রাইটকে অনুভূমিকভাবে এইভাবে কেন্দ্র করতে পারেন:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

যদি আপনার ব্যাকগ্রাউন্ড চিত্রটি একটি অনুভূমিকভাবে প্রান্তিকিত স্প্রাইট শীট হয় তবে আপনি প্রতিটি স্প্রিটকে উল্লম্বভাবে কেন্দ্র করে রাখতে পারেন:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

যদি আপনার স্প্রাইট শিটটি কমপ্যাক্ট হয়, বা আপনি উল্লিখিত পরিস্থিতিতে একটির মধ্যে আপনার ব্যাকগ্রাউন্ড চিত্রটি কেন্দ্র করার চেষ্টা করছেন না, এই সমাধানগুলি প্রযোজ্য নয়।

Answer 6

এটি আমার পক্ষে কাজ করে:

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}  

Answer 7

এটি আমার পক্ষে কাজ করে:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

Comments

margin: 0 auto;যেখানে autoএটি ডিভের মধ্যে অনুভূমিকভাবে কেন্দ্র করে। ধন্যবাদ!

— ওয়ালহি

Answer 8

এটি আমার পক্ষে কাজ করে:

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>        

Answer 9

এটি ডিভের কেন্দ্রে চিত্রটি সারিবদ্ধ করার জন্য আমার পক্ষে কাজ করে।

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}