সিএসএস ব্যবহার করে একটি পটভূমি চিত্র কেন্দ্র করা

Question

আমি একটি পটভূমি চিত্র কেন্দ্র করতে চান। কোনও ডিভ ব্যবহার করা হয়নি, এটি সিএসএস শৈলী:

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

উপরের সিএসএস টাইলগুলি সর্বত্র জুড়েছে এবং এটি কেন্দ্র করে ফেলেছে, তবে অর্ধেক চিত্রটি দেখা যায় না, এটি কেবল এক ধরণের উপরে উঠে যায়। আমি যা করতে চাই তা হল চিত্রটিকে কেন্দ্র করে center আমি কি 21 "স্ক্রিনে দেখতে ইমেজটি গ্রহণ করতে পারি?

Comments

এখন এটি চিত্রের আকার এবং ব্রাউজারের আকারের উপর নির্ভর করবে, তাই না?

— nicc.org

@ এনইসিসি +1, আমি সচেতন, তবে আশেপাশে কোনও কাজ হয়েছে কিনা তা জানতে হবে

— এক্স

Answer 1

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

এটা কাজ করা উচিত।

যদি তা না হয় তবে কেন divচিত্রটি দিয়ে একটি z-indexতৈরি না করে পটভূমি তৈরি করতে ব্যবহার করবেন? এটি শরীরের কোনও পটভূমির চিত্রের চেয়ে কেন্দ্রস্থল করতে অনেক সহজ হবে।

চেষ্টা ছাড়া অন্য:

background-position: 0 100px;/*use a pixel value that will center it*/অথবা আমি মনে করি আপনি যদি নিজের শরীর min-height100% তে সেট করে থাকেন তবে আপনি 50% ব্যবহার করতে পারবেন ।

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

Comments

এটি কেন্দ্রীভূত করে, তবে কেবলমাত্র অর্ধেক স্ক্রিন প্রদর্শন করে, আমার ইচ্ছা

— স্ট্যাকওভারফ্লোতে

আপনি একটি স্ক্রিনশট তৈরি করতে এবং এটি আপনার সার্ভারে বা ফটোবুককেট.কমের মতো কোনও ফ্রি পিক হোস্টিং সাইটে আপলোড করতে পারেন বা www.jsfiddle.net এ একটি অস্থায়ী উদাহরণ তৈরি করতে পারেন এবং আমাদের জন্য একটি লিঙ্ক পোস্ট করতে পারেন। আপনি যা বলেছেন তা থেকে চিত্রটি 1600x1200 এবং বেশিরভাগ স্ক্রিন রেজোলিউশন উচ্চতর হয় না, আপনার চিত্রকে ফিট করার জন্য আকার পরিবর্তন করার চেষ্টা করুন। আমি উদাহরণস্বরূপ 1440x900 এ ওয়াইডস্ক্রিন মনিটর ব্যবহার করি।

— কাইল

স্ক্রিনশট - ইমেজব্যাট / পিকভিউ.পিপি? =.০=ig১9৯ কীভাবে জেএসফিডেলে ছবি আপলোড করবেন তা আমি নিশ্চিত নই, আপনি যদি আমাকে এখানে সাহায্য করতে পারেন jsfiddle.net/yWrQP

— X10nD

জেসফিডেলে কোনও চিত্র যুক্ত করতে, কেবল সম্পূর্ণ http পাথটি এক্স ব্যবহার করুন: সিএসএসে রাখুন background-image:url(http://www.myurl.com/images/image.jpg);।

— কাইল

এটি করার জন্য আমার কাছে সার্ভার নেই, তবে একটি চিত্রশিল্পী সাইট ব্যবহার করেছে, তবে এখনও এটি পরীক্ষা করে দেখুন

— X10nD

Answer 2

আমি এই কোডটি ব্যবহার করি, এটি দুর্দান্ত কাজ করে

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(back2.png) center center no-repeat;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Comments

ধন্যবাদ! আমি এমনকি জানতাম না যে ওয়েবকিট ইত্যাদির জন্য আলাদা আলাদা ঘোষণা ছিল ...

— মাইক রাপাদাস

আরে ভিক্টর, আমি আপনার কোডটি অনেক ব্যবহার করেছি, তবে দেখে মনে হচ্ছে এটি এখন কাজ করে না। আমি ব্যাকগ্রাউন্ড-সংযুক্তি যুক্ত করেছি: স্থির; তবে এটি আমার আইপ্যাড ব্রাউজারে কাজ করছে না ...

— ভাদিম

-webkit-background-sizeযদিও বিশেষ ঘোষণা থেকে কেবল বিদ্যমান exists

— বিগবাং 1112

Answer 3

আমি মনে করি এই কি চেয়েছিলাম হয়:

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
} 

Comments

পটভূমি-সংযুক্তিটি আমার জন্য সমস্যাটি স্থির করেছে;)

— kdoteu

Answer 4

চেষ্টা

background-position: center center;

Comments

ডাবল সেন্টার সেন্টার কীভাবে কাজ করবে? যাইহোক এটি সমস্যাটি সমাধান করে না, এখনও একই

— X10nD

@ জিন: চশমা দেখুন, ব্যাকগ্রাউন্ড অবস্থানটি আসলে 2 টি মান (অনুভূমিক এবং উল্লম্ব) নিতে পারে। w3.org/TR/CSS2/colors.html#propdef-background-position

— রব ভ্যান

@ আরব এটি কাজ করছে না, চিত্রটি টাইলিং করছে। চিত্রটি 1600x1200 এবং আমার পর্দার আকার 1280x800

— X10nD

@ জিন আপনি কোনও পটভূমি চিত্রের আকার পরিবর্তন করতে পারবেন না (এখনও)। এটি সিএসএস 3 এ সম্ভব তবে এটি এখনও পর্যাপ্তভাবে সমর্থিত নয়। center centerসাথে background-repeat: no-repeatআপনি যা চাইবেন তা করা উচিত - চিত্রটি কেন্দ্র করে center

— পেক্কা

@ জিন আহ, আমি এখন আপনার স্ক্রিন শট থেকে দেখছি। আপনি দিতে হবে bodyএকটি min-heightএর 100%তাই এটি পূর্ণ পর্দায় জুড়ে প্রসারিত করে। এটি এটি বাছাই করতে পারে।

— পেক্কা

Answer 5

এটার মত:

background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;

html{
height:100%
}

body{
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}

Answer 6

আপনার কোডে একটি ত্রুটি আছে। আপনি ব্যাকগ্রাউন্ড-ইমেজ সম্পত্তিটিতে সম্পূর্ণ সিনট্যাক্স এবং শর্টহ্যান্ড স্বরলিপি মিশ্রণটি ব্যবহার করছেন T এটি নো-রিপিটকে অগ্রাহ্য করার কারণ করছে, কারণ এটি ব্যাকগ্রাউন্ড-ইমেজ সম্পত্তিটির বৈধ মান নয়।

body{   
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

নিম্নলিখিতগুলির মধ্যে একটি হওয়া উচিত:

body{
    background:url(../images/images2.jpg) center center no-repeat;
}

অথবা

body
{
    background-image: url(path-to-file/img.jpg);
    background-repeat:no-repeat;
    background-position: center center;
}

সম্পাদনা: আপনার চিত্র 'স্কেলিং' ইস্যুটির জন্য, আপনি এই প্রশ্নের উত্তরটি দেখতে চাইতে পারেন ।

Comments

'পটভূমি: ইউআরএল (../ চিত্র / চিত্র 2.jpg) কেন্দ্র কেন্দ্র নো-রিপিট;' সিনট্যাক্সটি ভুল হওয়ায় এবং কাজ করে না অন্যরাও কাজ করে না

— X10nD

Answer 7

এটা চেষ্টা কর background-position: center top;

এটি আপনার জন্য কৌশলটি করবে।

Answer 8

background-repeat:no-repeat;
background-position:center center;

এইচটিএমএল 4.0.০১ 'স্ট্রাইকটি' ডক্টিপ ব্যবহার করার সময় পটভূমির চিত্রটি উল্লম্বভাবে কেন্দ্র করে না।

যোগ করার পদ্ধতি:

background-attachment: fixed;

সমস্যা সমাধান করা উচিত

(সুতরাং আলেকজান্ডার ঠিক বলেছেন)

Answer 9

সহজভাবে প্রতিস্থাপন

background-image:url(../images/images2.jpg) no-repeat;

সঙ্গে

background:url(../images/images2.jpg)  center;

Answer 10

যদি উপরের উত্তরগুলিতে সন্তুষ্ট না হন তবে এটি ব্যবহার করুন

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

Answer 11

একই সমস্যা ছিল। ব্যবহৃত ডিসপ্লে এবং মার্জিন প্রোপার্টি ব্যবহার করে এবং এটি কাজ করে।

.background-image {
  background: url('yourimage.jpg') no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: whateveryouwantpx;
  width: whateveryouwantpx;
}

Answer 12

background-position: center center;

আমার ছাড়া কাজ করে না ...

background-attachment: fixed;

এক্স এবং y অক্ষের উপর আমার চিত্র উভয়কে কেন্দ্র করে ব্যবহার করা

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

Answer 13

আমার পক্ষে একমাত্র কাজটি হ'ল ..

margin: 0 auto