প্রতিক্রিয়াশীল CSS ব্যাকগ্রাউন্ড ইমেজ

Question

আমার একটি ওয়েবসাইট আছে (g-floors.eu) এবং আমি ব্যাকগ্রাউন্ডটি তৈরি করতে চাই (সিএসএসে আমি সামগ্রীর জন্য একটি বিজি-ইমেজ সংজ্ঞায়িত করেছি) এছাড়াও প্রতিক্রিয়াশীল করতে চাই। দুর্ভাগ্যক্রমে আমি কীভাবে এটি করতে পারি তার বিষয়ে আমার কোনও ধারণা নেই যা আমি ভাবতে পারি তবে এটি বেশ কার্যকর। চিত্রগুলি পরিবর্তন করতে একাধিক চিত্র তৈরি এবং তারপরে সিএসএস স্ক্রিন আকার ব্যবহার করে তবে আমি জানতে চাই যে এটি অর্জনের জন্য আরও কার্যকর কোন উপায় আছে কিনা।

মূলত আমি যা অর্জন করতে চাই তা হ'ল চিত্রটি (ওয়াটারমার্ক 'জি' সহ) চিত্রের কম প্রদর্শন না করে স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করে। এটা অবশ্যই যদি সম্ভব

লিঙ্ক: g-floors.eu

আমার এখন পর্যন্ত কোড রয়েছে (সামগ্রীর অংশ)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

Comments

এই লিঙ্কটি একবার দেখুন, আপনি কি খুঁজছেন এটি হতে পারে? css-tricks.com/perfect-full-page-background-image

— Christofer Vilander

আমি এই সমাধানটির মত অনুভব করি যা ক্রিস্টোফার ভিল্যান্ডার পোস্ট করা উত্তরের চেয়ে উত্তম সমাধান।

— CU3ED

কেবল অবাক হয়ে ভাবছেন যে ফেব্রুয়ারী 2015-র হিসাবে আপনি জিজ্ঞাসা করছেন সাইটটি কেন এই পুনরায় আকারটি বৈশিষ্ট্যটি বাস্তবায়িত করে না? এটি নিয়ে কিছু সমস্যা ছিল?

— লেজেন্ডলেন্থ

Answer 1

আপনি যদি ব্রাউজার উইন্ডোর আকারের উপর ভিত্তি করে একই চিত্রটি স্কেল করতে চান:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

প্রস্থ, উচ্চতা বা মার্জিন সেট করবেন না।

সম্পাদনা: প্রস্থ, উচ্চতা বা মার্জিন সেট না করার বিষয়ে পূর্ববর্তী লাইনটি উইন্ডো আকারের সাথে স্কেলিং সম্পর্কে ওপির মূল প্রশ্নটিকে বোঝায়। অন্যান্য ব্যবহারের ক্ষেত্রে, আপনি প্রয়োজনে প্রস্থ / উচ্চতা / মার্জিন সেট করতে চাইতে পারেন।

Comments

প্রস্থকে স্বয়ংক্রিয় আকার পরিবর্তন এবং উচ্চতা স্থির করা দেওয়া কি সম্ভব?

— জোচেমেকে

হ্যাঁ, আপনি পিক্সেলগুলিতে চিত্রের উচ্চতা এবং প্রস্থগুলিতে প্রস্থ নির্ধারণ করতে পারেন তবে চিত্রটি গন্তব্য হবে। এটি দেখতে সুন্দর লাগবে না।

— আন্দ্রে ভলগিন

আপনি যদি ভেক্টর ফর্ম্যাট ব্যবহার করেন তবে আপনি আরও অনেক ছোট চিত্র ব্যবহার করতে পারেন: en.m.wikedia.org/wiki/Scalable_Vector_Graphics

— Andrei

কি? প্রস্থে প্রস্থ স্থাপন করা হচ্ছে না, উচ্চতায় কনটেইনারটি চিত্রটি মোটেও প্রদর্শন করবে না।

— তুষারপাত

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

— আন্দ্রে ভলগিন

Answer 2

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

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

Comments

800x1280px স্ক্রিন আকারে, ছবিটি বাক্সের সাহায্যে ডানদিকে কেটে যায়। অন্যান্য সমস্ত আকার সূক্ষ্ম বলে মনে হচ্ছে।

— মুগ

Answer 3

এটা চেষ্টা কর :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

Answer 4

সিএসএস:

background-size: 100%;

কৌতুক করা উচিত! :)

Comments

এটি ব্রাউজার উইন্ডোতে অনুপাতের উপর ভিত্তি করে চিত্রটিকে সম্পূর্ণরূপে বিকৃত করবে। কখনই করবেন না।

— আন্দ্রে ভলগিন

কেবল ভবিষ্যতের রেফারেন্সের জন্য, এটি আসলে এইভাবে খারাপ দেখাচ্ছে না। পটভূমি-আকার: 100% 100% হবে, তবে কেবলমাত্র x কে 100% হিসাবে ঘোষণা করা ভয়ঙ্কর দেখা থেকে রেখেছে। পরীক্ষার কেস: কোডেপেন.আইও

— টিমোথি মিলার

এটি "বিকৃত" দেখায় না তবে এটি

— চিত্রকটি

সুতরাং গৃহীত উত্তর হবে। ওপি সেই সমস্যাটি সম্পর্কে জিজ্ঞাসা করেনি, কেবল এটির আকার পরিবর্তন করে সুন্দরভাবে তৈরি করা সম্ভব কিনা।

— টিমোথি মিলার 21

এই সমাধানটি আমার সমস্যার সমাধান করেছে। +1

— জেপিজি

Answer 5

আমি যে প্রতিক্রিয়াশীল প্রতিক্রিয়া চিত্রটি ব্যবহার করছি তার জন্য এখানে সাস মিক্সিন in এটি যে কোনও blockউপাদানগুলির জন্য কাজ করে । অবশ্যই এটি প্লেইন সিএসএসে কাজ করতে পারে আপনাকে কেবল paddingম্যানুয়ালি গণনা করতে হবে ।

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

উদাহরণ http://jsfiddle.net/XbEdW/1/

Comments

ফিডলের কোড (একটি ফ্রেমওয়ার্ক ব্যবহার করে) উত্তরের কোডের চেয়ে পৃথক।

— তুষার

Answer 6

এটি একটি সহজ =)

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

কটাক্ষপাত jsFiddle ডেমো

Answer 7

আমি পেয়েছি সেরা উপায় এখানে।

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

পরীক্ষা করে দেখুন W3Schools

আরও উপলব্ধ বিকল্প

background-size: auto|length|cover|contain|initial|inherit;

Answer 8

আমি ব্যবহার করতাম

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

যা সত্যিই ভাল কাজ করেছে।

Comments

এটাই আমার দরকার কোড! ধন্যবাদ :)) আমি 100% স্ক্রিনের কিন্তু 200px উচ্চতায় প্যারাল্যাক্স করার চেষ্টা করছি এবং আমার পুরো পটভূমির অনুপাত রেখে পটভূমির উপরের অংশটি কেবল প্রয়োজন।

— থিংক্লিনাক্স

Answer 9

#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}

Answer 10

নীচের চিত্রের উচ্চতা / প্রস্থ x 100 = প্যাডিং-নীচে% এ প্যাডিং যুক্ত করে প্রতিক্রিয়াশীল ওয়েবসাইট:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

---

আরও জটিল পদ্ধতি:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

---

আমার সেরা মনে হয় যাদু চমৎকার স্ক্রিপ্ট দেখতে পটভূমি eq ফায়ারফক্স Ctrl + পুনরায় আকার দেওয়ার চেষ্টা করুন:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

Answer 11

আপনি এটি ব্যবহার করতে পারেন। আমি পরীক্ষা করেছি এবং এর কাজ 100% সঠিক:

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

আপনি এই ওয়েবসাইটটির স্ক্রিন সাইজ সিমুলেটরটিতে প্রতিক্রিয়া সহ আপনার ওয়েবসাইটটি পরীক্ষা করতে পারেন: http://www.infobyip.com/testwebsiteresolution.php

প্রতিবার আপনি পরিবর্তন করার পরে আপনার ক্যাশে সাফ করুন এবং আমি এটি পরীক্ষা করতে ফায়ারফক্স ব্যবহার করতে পছন্দ করব।

আপনি যদি কোনও চিত্র ফর্মটি অন্য সাইট / ইউআরএল ব্যবহার করতে চান এবং পছন্দ করেন না: background-image:url('../images/bg.png'); // এই কাঠামোটি হল আপনার নিজের হোস্ট করা সার্ভার থেকে চিত্রটি ব্যবহার করা। তারপরে এটি ব্যবহার করুন: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

উপভোগ করুন :)

Answer 12

আপনি যদি অনুমান অনুপাত নির্বিশেষে পুরো চিত্রটি প্রদর্শন করতে চান তবে এটি চেষ্টা করুন:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

এটি স্ক্রিনের আকার যাই হোক না কেন পুরো চিত্রটি প্রদর্শন করবে।

Answer 13

    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>

Answer 14

কোড দুটি লাইন, এটি কাজ করে।

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}

Answer 15

JQuery সহ বর্গ অনুপাতের জন্য অভিযোজিত

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }

Answer 16

background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

অথবা

background-size:100%;

Answer 17

আমি মনে করি, এটি করার সর্বোত্তম উপায় হ'ল:

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

এইভাবে আরও কিছু করার দরকার নেই এবং এটি বেশ সহজ।

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

আমি আসা করি এটা সাহায্য করবে.

Answer 18

দুটি প্রস্থের জন্য এবং অন্যটি উচ্চতার জন্য দুটি যুক্তিbackground-size ব্যবহার করে চেষ্টা করুন

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

Answer 19

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

অবস্থানের সম্পত্তিটি আপনার প্রয়োজন অনুসারে উপরের নীচে এবং কেন্দ্রটিকে সারিবদ্ধ করার জন্য ব্যবহার করা যেতে পারে এবং পটভূমি-আকার কেন্দ্রের ফসল (কভার) বা পূর্ণ চিত্রের জন্য ব্যবহার করা যেতে পারে (ধারণ করে বা 100%)