প্রসারিত পটভূমি চিত্র CSS?

Question

<td class="style1" align='center' height='35'>
  <div style='overflow: hidden; width: 230px;'>
    <a class='link' herf='' onclick='topic(<?=$key;?>)'>
      <span id='name<?=$key;?>'><?=$name;?></span>
    </a>
  </div>
</td>

এটি আমার সিএসএস স্ক্রিপ্ট

.style1 {
  background-image: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: left center;
}

আমি background-imageপুরো <td>সেল জুড়ে প্রসারিত করতে চাই

Comments

কেবলমাত্র একটি নোট যে প্রসারিত রাস্টার চিত্রগুলি মানকে হ্রাস করে।

— wdm

এর প্রতিলিপি stackoverflow.com/questions/376253/...

— অ্যালেক্স Shesterov

@ ডাব্লুডিএম: এসভিজি হলে মানের অবক্ষয় ঘটবে না।

— পোজিট ল্যাবগুলি

Answer 1

.style1 {
  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 সমর্থিত ব্যাকগ্রাউন্ড-আকার তবে কীওয়ার্ড নয়)
• ফায়ারফক্স ৩.6++ (ফায়ারফক্স 4 নন-বিক্রেতা প্রিফিক্সড সংস্করণ সমর্থন করে)

এছাড়াও আপনি একটি আইই সমাধানের জন্য এটি চেষ্টা করতে পারেন

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;

ক্রিস কোয়ার এই নিবন্ধটির ক্রেডিট http://css-tricks.com/perfect-full-page-background-image/

Comments

এই কাজটি ঠিকঠাক তবে আমি কীভাবে এটি করতে পারি কেবল উচ্চতা প্রসারিত করতে চাই

— বুফন

আমি আপনার কোডটিতে -moz-background-size: 100% 100%;এটি পরিবর্তন করতে চাইলে এটি কাজ করতে সাহায্য করার জন্য ধন্যবাদ ... আপনাকে ধন্যবাদ

— বাফন

আরেকটি আইই 8

— ইরংজি.কম

আমার background-size: cover;জন্য `ব্যাকগ্রাউন্ড-আকারে পরিবর্তন করার পরে : 100% 100%;`

— ivan.mylyanyk

আমার একটি নির্দিষ্ট উচ্চতা (১৩০ পিক্স) এবং পূর্ণ প্রস্থের প্রয়োজন। এটি কাজ করেছে: background: url("images/bg.jpg") no-repeat center 0 fixed;এবং background-size: 100% 130px;(ইত্যাদি)। উচ্চতা কেন্দ্র করে (উত্তরে হিসাবে) যথেষ্ট পরিমাণে থাকলে পটভূমিটি লুকিয়ে রাখত।

— স্লিপারো

Answer 2

CSS3: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

.style1 {
  ...
  background-size: 100%;
}

আপনি এর সাথে কেবল প্রস্থ বা উচ্চতা নির্দিষ্ট করতে পারেন:

background-size: 100% 50%;

যা এটি প্রস্থের 100% এবং উচ্চতার 50% প্রসারিত করবে।

---

ব্রাউজার সমর্থন: http://caniuse.com/#feat=background-img-opts

Comments

বাহ, এটি আমার জন্য নিখুঁতভাবে কাজ করেছিল - আমি অন্যান্য উত্তরগুলি এবং বিভিন্ন কৌশলগুলির সিরিজ চেষ্টা করেছি। তবে এটি এত সহজ ছিল এবং তাত্ক্ষণিকভাবে কাজ করেছিল। আপনাকে ধন্যবাদ: ডি

— ডিলান্ট 25

Answer 3

আপনি একটি পটভূমি চিত্র প্রসারিত করতে পারবেন না (সিএসএস 3 অবধি)।

আপনাকে নিখুঁত অবস্থান ব্যবহার করতে হবে, যাতে আপনি ঘরে একটি চিত্র ট্যাগ লাগাতে পারেন এবং পুরো ঘরটি কভার করার জন্য এটি প্রসারিত করতে পারেন, তারপরে সামগ্রীটি চিত্রের উপরে রাখুন।

table {
  width: 230px;
}

.style1 {
  text-align: center;
  height: 35px;
}

.bg {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.bg .linkcontainer {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
}

<table cellpadding="0" cellspacing="0" border="10">
  <tr>
    <td class="style1">
      <div class="bg">
        <img src="http://placekitten.com/20/20" alt="" />
        <div class="linkcontainer">
          <a class="link" href="#">
            <span>Answer</span>
          </a>
        </div>
      </div>
    </td>
  </tr>
</table>

Comments

+1, সঠিক। এটি থাকা এবং সর্বাধিক প্রস্থ / উচ্চতা <img>সহ মোড়ানো ভাল ধারণা । সমস্ত ব্রাউজারে টিডি নিজেই আপেক্ষিক নয়, যদি থাকে। <div>position: relative;

— মাদ্রি

আমি IE এর সাথে লড়াই করছিলাম, এটির জন্য +1

— আর্জুনসি

Answer 4

আমি মনে করি আপনি যা খুঁজছেন তা হ'ল

.style1 {
  background: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

Comments

এই আমার প্রয়োজন ঠিক কি!

— রাচেল উয়ে

Answer 5

এটি নির্বিঘ্নে @ 2019 এ কাজ করে

.marketing-panel  {
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

Answer 6

আপনার কোডের লাইনে কেবল এটি আটকান:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />