পুরো HTML উপাদানটি কভার করতে আমি কীভাবে একটি পটভূমি চিত্র প্রসারিত করব?

Question 1

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

বেশি ভাগ্য নেই। এটি কি সম্ভব বা এটি আমার ব্যাকগ্রাউন্ড ইমেজ হওয়া ছাড়াও অন্য কোনও উপায়ে করতে হবে?

আমার বর্তমান সিএসএস হ'ল:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

আগাম ধন্যবাদ.

সম্পাদনা: আমি গ্যাব্রিয়েলের পরামর্শে সিএসএস বজায় রাখতে আগ্রহী না তাই পরিবর্তে আমি পৃষ্ঠার বিন্যাসটি পরিবর্তন করছি। তবে এটি সেরা উত্তরের মতো বলে মনে হচ্ছে তাই আমি এটির মতো চিহ্নিত করছি।

Question 2

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

Question 3

background-sizeসম্পত্তিটি ব্যবহার করুন : http://www.w3.org/TR/css3-background/#the-background-size

Question 4

সংক্ষেপে আপনি এটি চেষ্টা করতে পারেন ....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

যেখানে আমি কয়েকটি সিএসএস এবং জেএস ব্যবহার করেছি ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

এবং এটা আমার জন্য ভাল কাজ করছে।

Question 5

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

আপনি কী শেষ করছেন তা আমাদের জানান।

সম্পাদনা: আমি যা প্রস্তাব করেছি তা হ'ল গ্যাব্রিয়েলের লিঙ্কে। তাই চেষ্টা করুন :)

Question 6

@ ফিলো উত্তরটি প্রসারিত করতে আপনি একটি পৃষ্ঠায় খুব বড় চিত্র (বা কোনও আকারের চিত্র) কেন্দ্র করতে পারেন:

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

অথবা আপনি একটি পটভূমির রঙের সাথে একটি ছোট চিত্র ব্যবহার করতে পারেন যা চিত্রের পটভূমির সাথে মেলে (যদি এটি কোনও শক্ত রঙ হয়)। এটি আপনার উদ্দেশ্য অনুসারে বা নাও পারে।

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Question 7

যদি আপনার পর্দার আকার পরিবর্তন করার সময় আপনার পটভূমি চিত্রটি প্রসারিত করতে হয় এবং আপনার পুরানো ব্রাউজার সংস্করণগুলির সাথে সামঞ্জস্যের প্রয়োজন না হয় এটি কাজ করবে:

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Question 8

আপনার যদি একটি বৃহত্তর ল্যান্ডস্কেপ চিত্র থাকে তবে এই উদাহরণটি প্রতিকৃতি মোডে পটভূমিটির আকার পরিবর্তন করে, যাতে এটি নীচে প্রদর্শিত হয় এবং নীচে ফাঁকা রেখে:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

Question 9

নিম্নলিখিত কোডটি আমি বেশিরভাগ জিজ্ঞাসিত প্রভাব অর্জনের জন্য ব্যবহার করি:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

Question 10

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;

Question 11

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

Question 12

চিত্র {

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%;

Question 13

কেবলমাত্র একটি ডিভকে দেহের প্রত্যক্ষ সন্তান হিসাবে চিহ্নিত করুন (উদাহরণস্বরূপ শ্রেণীর নাম বিজি সহ), শরীরের অন্যান্য সমস্ত উপাদানকে অন্তর্ভুক্ত করে সিএসএস ফাইলে যুক্ত করুন:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

এই লিঙ্কটি দেখুন: https://www.w3schools.com/css/css_rwd_images.asp যে অংশে বলা হয়েছে তা নীচে স্ক্রোল করুন:

যদি ব্যাকগ্রাউন্ড-আকারের সম্পত্তিটি "100% 100%" তে সেট করা থাকে, ব্যাকগ্রাউন্ড চিত্রটি পুরো সামগ্রীর ক্ষেত্রটি কভার করতে প্রসারিত হবে

সেখানে এটি 'img_flowers.jpg' স্ক্রিন বা ব্রাউজারের আকারে প্রসারিত দেখায় আপনি এটিকে কীভাবে আকার দিন তা নির্বিশেষে।

Question 14

এটা আমার জন্য কাজ করে

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}