ব্যাকগ্রাউন্ডে একটি সিএসএস চিত্র প্রসারিত করুন এবং স্কেল করুন - কেবল সিএসএস সহ

Question

আমি চাই যে আমার পটভূমি চিত্রটি ব্রাউজারের ভিউপোর্টের আকারের উপর নির্ভর করে প্রসারিত এবং স্কেল করে।

স্ট্যাক ওভারফ্লোতে আমি কিছু প্রশ্ন দেখেছি যা কাজ করে, উদাহরণস্বরূপ স্ট্রেচ এবং স্কেল CSS ব্যাকগ্রাউন্ডের মতো । এটি ভাল কাজ করে, তবে আমি backgroundকোনও imgট্যাগ দিয়ে নয়, ছবিটি ব্যবহার করে রাখতে চাই ।

তার মধ্যে একটি imgট্যাগ স্থাপন করা হয়, এবং তারপরে সিএসএসের সাহায্যে আমরা imgট্যাগটিতে শ্রদ্ধা জানাই।

width:100%; height:100%;

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

background-imageঘোষণার সাথে এটি করার কোনও ভাল পদ্ধতি আছে কি ?

Comments

পটভূমি-আকার: 100% 100%;

— আন্দ্রেস এল।

হতে পারে এই ডেমোটি সহায়ক হতে পারে: w3schools.com/cssref/…

— ডেভিড

প্রস্থের সাথে ফিট করার

— অ্যালেক্স আঙ্গাস

@ অ্যালেক্সআঙ্গাস প্রশ্নের বয়স কি ফ্যাক্টর হওয়া উচিত নয়? এটি 6 বছর আগে জিজ্ঞাসা করা হয়েছিল এবং আপনি যে প্রশ্নটি উল্লেখ করেছেন সেটি 4 বছর আগে জিজ্ঞাসা করা হয়েছিল।

— ফ্যাবিও অ্যান্টুনস

@ FábioAntunes IMHO আমরা সেরা উত্তর দিয়ে প্রশ্নটি বন্ধ করতে চাই না এবং পরিবর্তে ডুপ্লিকেটগুলি এর সাথে লিঙ্ক করতে উত্সাহিত করব। আমি নিশ্চিত যে এটি মেটাতে আলোচনা করা হত তবে এখনই এটি খুঁজে পাচ্ছি না ...

— আলেক্স অ্যাঙ্গাস

Answer 1

CSS3 এর একটি দুর্দান্ত ছোট অ্যাট্রিবিউট রয়েছে background-size:cover।

এটি চিত্রটিকে স্কেল করে যাতে দিক অনুপাত বজায় রেখে ব্যাকগ্রাউন্ডের অঞ্চলটি পুরোপুরি পটভূমির চিত্র দ্বারা আচ্ছাদিত হয়। পুরো অঞ্চলটি beাকা হয়ে যাবে। তবে, আকার পরিবর্তনকৃত চিত্রটির প্রস্থ / উচ্চতা যদি দুর্দান্ত হয় তবে চিত্রটির কিছু অংশ দৃশ্যমান নাও হতে পারে।

Comments

দিক অনুপাতটি মেলে না হলে চিত্রটি কাটুন, সুতরাং এটি কোনও ভাল সাধারণ সমাধান নয়।

— মাহমোফ

আপনি যদি এটি আইই ব্রাউজারগুলিতে কাজ করতে চান - github.com/louisremi/background-size-polyfill

— Wreeecks

এটি ফায়ারফক্সে কাজ করছে বলে মনে হচ্ছে না। তবে background-size: 100vw 100vh;কৌতুকটি সুন্দরভাবে করে ly

— ইয়ানিক মউরে 10

@ ইয়ানিকমৌরে চেষ্টা করুন: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;

— অমিত কুমার খারে

: যদি আপনি এই চান, কিন্তু শুধুমাত্র অনুভূমিক অক্ষের জন্য, এটি ব্যবহার করুন background-size: 100% auto; stackoverflow.com/questions/41025630/...

— antoineMoPa

Answer 2

আপনি এটি বেশ সুন্দরভাবে করতে CSS3 বৈশিষ্ট্যটি ব্যবহার করতে পারেন। এটি অনুপাতের আকার পরিবর্তন করে যাতে কোনও চিত্র বিকৃতি হয় না (যদিও এটি ছোট চিত্রগুলিকে উপস্থাপন করে)। কেবল লক্ষ্য করুন, এটি এখনও সমস্ত ব্রাউজারে প্রয়োগ করা হয়নি।

background-size: 100%;

Comments

@ এনএক্সকিডি এটি সম্পূর্ণ কোডটি বেশ! একটি দিয়ে একটি ধারক তৈরি করুন background-imageএবং উপরের সম্পত্তি অন্তর্ভুক্ত করুন। উল্লিখিত হিসাবে, ব্রাউজার সমর্থন এখনও ভাল না এবং এটির ব্রাউজারের নির্দিষ্ট সংস্করণ রয়েছে। -webkit-background-sizeইত্যাদি দেখুন ডাব্লু 3 সি সিএসএস 3 মডিউল: পটভূমি-আকার এবং css3.info: পটভূমি-আকার

— মিঃ হোয়াইট

চিত্রটির দিক অনুপাত সংরক্ষণ করতে আপনার "পটভূমি-আকার: কভার" ব্যবহার করা উচিত; বা "ব্যাকগ্রাউন্ড-আকার: ধারণ করা;" আমি একটি পলিফিল তৈরি করেছি যা আইই 8 -তে এই মানগুলি কার্যকর করে: github.com/louisremi/background-size-polyfill

— লুই-

autoদিক অনুপাত সংরক্ষণে যুক্ত করার পরামর্শ দেওয়া হয় ।

— চিবুয়েজ ওপাটা

Answer 3

আমি উল্লিখিত কোডটি ব্যবহার করে ...

এইচটিএমএল

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

সিএসএস

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

এটি পছন্দসই প্রভাব তৈরি করে: কেবলমাত্র সামগ্রীটি স্ক্রোল করবে, ব্যাকগ্রাউন্ডটি নয়।

কোনও পর্দার আকারের জন্য পটভূমি চিত্রটি ব্রাউজারের ভিউপোর্টে আকার দেয়। যখন সামগ্রীটি ব্রাউজারের ভিউপোর্টের সাথে খাপ খায় না, এবং ব্যবহারকারীকে পৃষ্ঠাটি স্ক্রোল করতে হয়, তখন সামগ্রীটি স্ক্রোল করার সময় পটভূমি চিত্রটি ভিউপোর্টে স্থির থাকে।

সিএসএস 3 দিয়ে মনে হচ্ছে এটি অনেক সহজ হবে।

Comments

তবে এটি পটভূমির চিত্র নয়। আপনি কেবল একটি ব্লকে এটি করতে পারেন, তবে কোনও ইনপুট [টাইপ = পাঠ্য] এর মতো কোনও ইনলাইন উপাদান নয়। নাকি আমি ভুল করছি?

— ডিয়ারচাও

কোন শ্রেণী = "প্রসারিত" জন্য, শুধু CSS এ #background চিত্র {} শনাক্তকারী হিসেবে ব্যবহার প্রয়োজন

— BerggreenDK

জেড-ইনডেক্স: -1; আপনার চিত্রকে পটভূমিতে রাখে। যদি আপনি অগ্রণীতে আপনার চিত্রটি দেখাতে চান তবে আপনি জেড-ইনডেক্স মান বাড়িয়ে দিতে পারেন বা সেই সূচকটি সরিয়ে ফেলতে পারেন।

— গোখনাকুর্ত্ত

আমি যে সমস্যাটি করছি তা আইই 8 এর সাথে রয়েছে। একটি ডিআইভির ব্যাকগ্রাউন্ড চিত্রটি পুরো প্রসারিত কিন্তু আই 8-তে চিত্রগুলি ডিআইভির বাইরে চলে যায় তাই পুরো চিত্রটি দেখতে পারা যায় না। এটি ফসল পেয়ে যায়। : এখানে আমার প্রশ্ন হল stackoverflow.com/questions/22331179/...

— Si8

লোকেরা যে স্পষ্ট ভুলটি করে তা হ'ল ব্যাকগ্রাউন্ড ইমেজটি সিএসএসে (অর্থাৎ দ্বারা background : url("example.png");) স্থাপন করা এবং তারপরে background-size:100%;চিত্রটির পর্দার প্রস্থে স্কেল করার জন্য এর নীচে CSS বৈশিষ্ট্যটি ব্যবহার করা । এই কাজ করবে না, এটা কি? আপনি যদি শরীরের জন্য কোনও পটভূমি চিত্র রাখতে চান তবে একটি চিত্রের বৈশিষ্ট্যটি বডি ট্যাগের মতো যুক্ত করা উচিত <body background="example.png">। তারপরে background-size:100%;এটি স্কেল করতে সিএসএস ব্যবহার করুন ।

— sjsam

Answer 4

সিএসএস:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

Comments

তবে এটি আই 8 তে কাজ করে না। এটি উইন্ডোর উপরের এবং নীচে একটি মার্জিন তৈরি করে।

— এরদোমিস্টার

Android এর html, body {...}পরিবর্তে এটি ব্যবহার করার সময় এটির জন্য কাজ করেছিল body {...}।

— এডওয়ার্ড

Answer 5

background-size: 100% 100%; 

উভয় অক্ষতে পুরো উপাদানটি পূরণ করতে ব্যাকগ্রাউন্ড প্রসারিত করে।

Answer 6

নীচের সিএসএস অংশটি সমস্ত ব্রাউজারের সাথে চিত্রটি প্রসারিত করা উচিত।

আমি প্রতিটি পৃষ্ঠার জন্য এটি গতিশীলভাবে করি। সুতরাং আমি প্রতিটি পৃষ্ঠার জন্য নিজস্ব HTML ট্যাগ উত্পন্ন করতে পিএইচপি ব্যবহার করি। সমস্ত ছবি 'ইমেজ' ফোল্ডারে রয়েছে এবং শেষ হয় 'বিজি.জেপিজি' দিয়ে।

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

আপনার যদি সমস্ত পৃষ্ঠার জন্য কেবল একটি পটভূমি চিত্র থাকে তবে আপনি $picভেরিয়েবলটি সরিয়ে ফেলতে পারেন, ব্যাক-স্ল্যাশগুলি এড়িয়ে চলতে পারবেন, পাথগুলি সামঞ্জস্য করতে পারেন এবং এই কোডটি আপনার সিএসএস ফাইলে রেখে দিতে পারেন।

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

এটি ইন্টারনেট এক্সপ্লোরার 9, ক্রোম 21 এবং ফায়ারফক্স 14 দিয়ে পরীক্ষা করা হয়েছিল।

Comments

আপনার উদাহরণ পিছনের সামঞ্জস্যের অর্থে কাজ করে না, কারণ আপনি কেবল বিক্রেতার উপসর্গের শীর্ষস্থানীয় '-' সম্পর্কে ভুলে গেছেন। এটি অবশ্যই হবে -webkit-background-size, -moz-background-sizeইত্যাদিও। বিকাশকারী.মোজিলা.অর্গ.ইন-background: url(img/bg-home.jpg) no-repeat center center / cover fixed;

— ইউএস

এটিই ছিল একমাত্র সমাধান যা আই 9 তে আমার জন্য কাজ করবে। ধন্যবাদ।

— রোবনিক

Answer 7

আপনি প্রকৃতপক্ষে img ট্যাগ সহ একটি পটভূমি চিত্রের মতো একই প্রভাব অর্জন করতে পারেন। আপনাকে কেবল তার জেড-সূচকটি অন্য সমস্ত কিছুর চেয়ে কম সেট করতে হবে, অবস্থান নির্ধারণ করুন: পরমগ্রাফ এবং প্রতিটি বাক্সের জন্য স্বচ্ছ পটভূমি ব্যবহার করুন।

Comments

আমি অন্যকে যা দেখেছি তা নিয়ে প্রশ্ন রয়েছে এবং এটি কাজ করে তবে সিএসএস 3 যেহেতু প্রকাশ পেয়েছে, আমি ভেবেছিলাম এখন এটির আরও ভাল উপায়।

— ফ্যাবিও অ্যান্টুনস

ব্রাউজার ব্যবহারের ক্ষেত্রে অ্যাকাউন্টের বিকাশ হতে পারে এবং সেগুলি গ্রহণ করা যেতে পারে, আপনি কেবল এটিই বাণিজ্যিকভাবে ব্যবহার করতে পারবেন ... 10 বছরে?

— কিম স্টেবল

CSS3 হওয়ার কারণে, সর্বাধিক আধুনিক ব্রাউজারগুলি এমন কোনও সম্পত্তি ব্যবহার এবং অসমর্থিত ব্রাউজারগুলিকে ন্যূনতম মান দেওয়ার ক্ষেত্রে কোনও ভুল নেই। এখানে, উদাহরণস্বরূপ, আপনি <IE8 এর জন্য বিরক্তিকর তবে গ্রহণযোগ্য টাইলড ব্যাকগ্রাউন্ড এবং ফায়ারফক্স / ক্রোম / সাফারি / অপেরার জন্য একটি সুন্দর ছবি ব্যবহার করতে সক্ষম হতে পারেন। এছাড়াও, জাভাস্ক্রিপ্ট সহ পুরানো ব্রাউজারগুলিতে CSS3 কার্যকারিতা অনুলিপি করতে অনেকগুলি পলফিল রয়েছে। অন্য কথায়, প্রতিটি ব্রাউজার এটি ব্যবহারের জন্য CSS3 সমর্থন করার জন্য অপেক্ষা করার দরকার নেই।

— ড্যান ব্লোস

: শুধু এই অন্য পোস্টে যা রেফারেন্স মালিকানা মাইক্রোসফট AlphaImageLoader ব্যবহার পাওয়া stackoverflow.com/questions/2991623/...

— uglymunky

Answer 8

এই সিএসএস ব্যবহার করুন:

background: url('img.png') no-repeat; 
background-size: 100%;

Answer 9

এটি সিএসএস ট্রিক্স দ্বারা ব্যাখ্যা করা হয়েছে: নিখুঁত পূর্ণ পৃষ্ঠা ব্যাকগ্রাউন্ড চিত্র

ডেমো: https://css-tricks.com/example/FullPageBackgroundImage/progressive.php

কোড:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Comments

উপরের উত্তরের ভিত্তিতে, আমি দেখেছি ব্যাকগ্রাউন্ড সংযুক্তি সংশোধন মোবাইল ডিভাইস এবং মাইক্রোসফ্ট প্রান্তে কাজ করে না। পটভূমি প্রসারিত করা এবং সমস্ত ডিভাইস এবং ব্রাউজারগুলিতে ঠিক করার সঠিক সমাধানটি

— আমের শাহজাদ

Answer 10

আপনি এই ক্লাসটি আপনার সিএসএস ফাইলে যুক্ত করতে পারেন।

.stretch {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

এটি এতে কাজ করে:

• সাফারি 3 বা তারপরে
• ক্রোম যাই হোক না কেন পরে
• ইন্টারনেট এক্সপ্লোরার 9 বা তারপরে
• অপেরা 10 বা তার পরে (অপেরা 9.5 সমর্থিত background-size, তবে কীওয়ার্ড নয়)
• ফায়ারফক্স ৩.6 বা তার পরে (ফায়ারফক্স 4 নন-ভেন্ডর প্রিফিক্সড সংস্করণ সমর্থন করে)

Comments

এটি একটি কার্যকারী "স্ট্রেচ টু ফিট" উত্তর। দ্রষ্টব্য: দিক অনুপাত পরিবর্তন হবে।

— devdrc

Answer 11

আপনার চিত্রগুলি ধারক আকারের উপর ভিত্তি করে যথাযথভাবে স্কেল করতে, নিম্নলিখিতটি ব্যবহার করুন:

background-size: contain;
background-repeat: no-repeat;

Answer 12

আমি এটি ব্যবহার করি এবং এটি সমস্ত ব্রাউজারের সাথে কাজ করে:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>

Answer 13

ধন্যবাদ!

তবে তখন এটি গুগল ক্রোম এবং সাফারি ব্রাউজারগুলির জন্য কাজ করছে না (প্রসারিত কাজ হয়েছে, তবে ছবিগুলির দৈর্ঘ্যটি মাত্র 2 মিমি!) ছিল , যতক্ষণ না কেউ আমাকে বলে যে কিসের অভাব রয়েছে:

সেট করার চেষ্টা করুন height:auto;min-height:100%;

সুতরাং আপনার height:100%;লাইনের জন্য এটি পরিবর্তন করুন , দেয়:

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

এই নতুন যুক্ত কোডটির ঠিক আগে আমার ড্রুপাল টেন্ডু থিমগুলিতে এটি ছিল style.css:

এইচটিএমএল, বডি {উচ্চতা: 100%;

#page {পটভূমি: #FFFFFF; উচ্চতা: অটো! গুরুত্বপূর্ণ; উচ্চতা: 100%; ন্যূনতম উচ্চতা: 100%; অবস্থান: আপেক্ষিক;

তারপরে আমাকে ছবি যুক্ত করার সাথে দ্রুপালের মধ্যে একটি নতুন ব্লক তৈরি করতে হবে class=stretch:

<img alt = "" শ্রেণী = "প্রসারিত" src = "pic.url" />

সেই দ্রুপাল ব্লকে কেবল সম্পাদককে একটি ছবি অনুলিপি করা কার্যকর হয় না; একজনকে সম্পাদনা করতে হবে বিন্যাসবিহীন পাঠ্যে।

Answer 14

আমি চিত্রটি 100% প্রস্থ এবং উচ্চতা সহ পরম ডিভের সাথে একমত। আপনি সিএসএসে শরীরের জন্য 100% প্রস্থ এবং উচ্চতা নির্ধারণ করেছেন এবং মার্জিন এবং প্যাডিং শূন্যতে সেট করেছেন তা নিশ্চিত করুন। আপনি এই পদ্ধতির সাথে আরও একটি সমস্যা খুঁজে পাবেন যা হ'ল পাঠ্য নির্বাচন করার সময়, নির্বাচন অঞ্চলটি মাঝে মাঝে পটভূমির চিত্রটি ঘিরে ফেলতে পারে, যা পুরো পৃষ্ঠাটিকে নির্বাচিত অবস্থায় তৈরি করার দুর্ভাগ্যজনক প্রভাব ফেলে। আপনি user-select:noneসিএসএস নিয়মটি ব্যবহার করে এটির পক্ষে পেতে পারেন:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

আবার, ইন্টারনেট এক্সপ্লোরারটি এখানে খারাপ লোক, কারণ এটি ব্যবহারকারী-নির্বাচনের বিকল্পটি স্বীকৃতি দেয় না - এমনকি ইন্টারনেট এক্সপ্লোরার 10 পূর্বরূপও এটি সমর্থন করে না, তাই আপনার পটভূমি চিত্র নির্বাচন প্রতিরোধ করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করার বিকল্প রয়েছে (উদাহরণস্বরূপ, HTTP : //www.felgall.com/jstip35.htm ) বা CSS 3 ব্যবহার করে ব্যাকগ্রাউন্ড-প্রসারিত পদ্ধতি ।

এছাড়াও, এসইওর জন্য আমি পৃষ্ঠার নীচের অংশে ব্যাকগ্রাউন্ড চিত্রটি রাখব, তবে পটভূমি চিত্রটি লোড হতে খুব বেশি সময় নিলে (এটি প্রথমদিকে সাদা ব্যাকগ্রাউন্ড সহ) আপনি পৃষ্ঠার শীর্ষে যেতে পারেন।

Comments

তারপরে বিজি সহ কেবলমাত্র একটি

— ডিভিকে

Answer 15

আমি পুরো পৃষ্ঠায় প্রসারিত না করে কোনও পটভূমি চিত্রটি কেন্দ্র করে স্কেল করতে চেয়েছিলাম এবং আমি চেয়েছিলাম যে অনুপাতটি বজায় থাকে। এটি আমার পক্ষে কাজ করেছে, অন্যান্য উত্তরে প্রস্তাবিত বিভিন্নতার জন্য ধন্যবাদ:

অনলাইন চিত্র: ------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

সিএসএস ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}

Answer 16

আদর্শ স্কেলিং ব্যাকগ্রাউন্ড চিত্রটি অর্জন করতে আমি ব্যাকগ্রাউন্ড-এক্স সিএসএস বৈশিষ্ট্যের সংমিশ্রণ ব্যবহার করেছি।

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

এটি ব্যাকগ্রাউন্ডটিকে সর্বদা পুরো ব্রাউজার উইন্ডোটি coverেকে রাখে এবং স্কেলিংয়ের সময় কেন্দ্রে থেকে যায়।

Answer 17

ব্যাক স্ট্রেচ প্লাগইন ব্যবহার করুন । একটি এমনকি বেশ কয়েকটি চিত্র স্লাইড হতে পারে। এটি পাত্রেও কাজ করে। উদাহরণস্বরূপ এই উপায়ে ব্যাকগ্রাউন্ডের একটি অংশ কেবল পটভূমির চিত্রের সাথে coveredাকা থাকতে পারে।

যেহেতু আমি এটি কাজ করতে পেলাম এটি প্রমাণ করে যে এটি প্লাগইন ব্যবহার করা সহজ :)

Answer 18

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

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

এটি দেখতে সুন্দর লাগবে।

Answer 19

এই সিএসএস ব্যবহার করুন:

background-size: 100% 100%

Comments

Downwoted, এই পূর্ববর্তী উত্তর সদৃশ stackoverflow.com/a/35021247/3810453

— Zanshin13

@ জাংশিন 13 আমি আগের প্রশ্নের সম্পর্কে জানতাম না। তাহলে আপনাকে প্রশ্ন বন্ধ করার পক্ষে ভোট দিতে হবে না আমার উত্তর!

— শায়দি শেরিফ

Answer 20

border-image : yourimageসীমানা পর্যন্ত চিত্রটি স্কেল করতে আপনি সম্পত্তিটি ব্যবহার করতে পারেন । এমনকি আপনি ব্যাকগ্রাউন্ড-চিত্রটি দিলেও, এটির উপরে সীমানা চিত্রটি আঁকা হবে।

border-imageসম্পত্তি খুব দরকারী যদি আপনার শৈলী পত্রক কোথাও যা সিএসএস 3. সমর্থন করে না বাস্তবায়িত হয় আপনি Google Chrome বা Firefox ব্যবহার করেন তাহলে, তারপর আমি সুপারিশ background-size:coverসম্পত্তি নিজেই।

Answer 21

আপনি কি কেবল একটি চিত্র ব্যবহার করে এটি অর্জন করতে চান? কারণ আপনি দুটি চিত্র ব্যবহার করে প্রসারিত পটভূমির সাথে কিছুটা অনুরূপ করতে পারেন। উদাহরণস্বরূপ পিএনজি চিত্রসমূহ।

আমি এটি আগে করেছি, এবং এটি এতটা কঠিন নয়। তদুপরি, আমি মনে করি প্রসারিত করা কেবল পটভূমির মানকে ক্ষতি করবে। এবং আপনি যদি একটি বিশাল চিত্র যুক্ত করেন তবে এটি ধীর কম্পিউটার এবং ব্রাউজারগুলিকে ধীর করে দেবে।

Comments

ভাল যুক্তি. তবে আমি ব্যাকগ্রাউন্ড ইমেজটির জন্য জেপিজি ব্যবহার করছি, সেগুলি প্রায় 1500x1000 কেবল 100 কেবিবি থেকে কিছুটা বেশি সময় নেয়। তবে কীভাবে করলেন?

— ফ্যাবিও অ্যান্টুনস

অনুভূমিকভাবে চিত্রটি কেন্দ্রীভূত করার এবং কোনও দৃ color় রঙ বা কোনও প্যাটার্ন দিয়ে চিত্রের প্রান্তগুলি নরম করার বিষয়ে কীভাবে? যদি ব্যবহারকারীর চিত্রের চেয়ে বেশি রেজোলিউশন থাকে তবে এটি আপনাকে বিরামবিহীন অভিযোজন করতে দেয়।

— মারিওরিকলেড

তবে আমি চাই যে চিত্রটি ব্যাকগ্রাউন্ডটি পূর্ণ করে। আপনার বক্তব্যটি, আমি সাধারণত যা করি তা ঠিক।

— ফ্যাবিও অ্যান্টুনস

Answer 22

নিম্নলিখিত আমার জন্য কাজ করে।

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

যা বিভিন্ন মাত্রায় পুরো পটভূমিটি কভার করতে কাজ করেছিল