কোর্স সূচী

CSS অগ্রণী শিক্ষাক্রম

• หนังสือเกี่ยวกับ CSS
• CSS นิยาม
• CSS พื้นฐาน
• CSS ฉบับสูง
• CSS ลูกนักเรียน
• CSS id ค้นหา
• CSS คลาสค้นหา
• CSS สร้าง
• CSS พื้นหลัง
• CSS ข้อความ
• CSS ฟอนต์
• CSS รายการ

CSS ফ্রেমওয়ার্ক

• CSS โมดูลแบบแถว
• CSS มุมฝาย
• CSS ขอบ
• CSS มุมนอก
• CSS มุมนอกที่ผสม

CSS স্থানান্তর

• CSS รายละเอียดการตั้งตำแหน่ง
• CSS ตั้งตำแหน่งเชิงเฉียง
• CSS ตั้งตำแหน่งแบบสุดท้าย
• CSS หล่อน

CSS সিলেক্টর

• CSS ค้นหาองค์ประกอบ
• CSS กลุ่มค้นหา
• CSS คลาสค้นหารายละเอียด
• CSS id ค้นหารายละเอียด
• CSS ค้นหาแบบคุณสมบัติรายละเอียด
• CSS ค้นหาหลังเด็ด
• CSS ค้นหาลูกองค์ประกอบ
• CSS ค้นหาพี่น้อง

বাধ্যতামূলক কোর্স

কোর্স সুপারিশ:

• CodeW3C.com บางโบสถ์

CSS পূর্ণ রঙ হিসাবে পটভূমি রঙ আপ্লিকেশন করতে পারে এবং পটভূমি ছবি ব্যবহার করে যথেষ্ট জটিল প্রভাব তৈরি করতে পারে

CSS এর এই ক্ষেত্রের ক্ষমতা HTML তুলনায় অনেকটাই বেশি

পটভূমির রঙ

ব্যবহার করা যেতে পারে background-color বৈশিষ্ট্যউপাদানের পটভূমির রঙ সজ্জিত করুন। এই বৈশিষ্ট্যটি যে কোনও কৃত্যমান রঙের মান গ্রহণ করে

এই নিয়মটি উপাদানের পটভূমির রঙকে গ্রে রঙে সজ্জিত করে

p {background-color: gray;}

যদি আপনি চান যে পটভূমির রঙ উপাদানের লেখার চারপাশে কিছুটা কম প্রসারিত হোক, তবে কিছু অভ্যন্তরীণ মার্জিন যোগ করুন:

p {background-color: gray; padding: 20px;}

আপনার নিজের পরীক্ষা করুন

সব উপাদানের পটভূমির রঙ সজ্জিত করা যায়, তার মধ্যে রয়েছে body থেকে পর্যন্ত em এবং a এমনভাবে অন্তর্ভুক্ত সমস্ত লাইনবদ্ধ উপাদান

background-color উত্তরসূরী হয় না, তার ডিফল্ট মান হল transparent (স্পষ্ট)।transparent শব্দটি 'স্পষ্ট' বলে মানা হয়। অর্থাৎ, যদি একটি উপাদান পটভূমির রঙ নির্দিষ্ট না হয়, তবে পটভূমি স্পষ্ট থাকবে এবং তার পূর্বসূরীর পটভূমি দেখা যাবে。

পটভূমি ছবি

ছবিটিকে পটভূমিতে সজ্জিত করতে হলে background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多数背景都应用到 body 元素，不过并不仅限于此。

下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

আপনার নিজের পরীক্ষা করুন

理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。

另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。

পিছনভাগ পুনরাবৃত্তি

যদি পিছনভাগের ছবিকে প্রসারিত করতে হয়, তবে background-repeat 属性

প্রতিবন্ধকতা মান repeat পিছনভাগের ছবিকে উপর এবং নীচের দিকে সমানভাবে প্রসারিত করে, যেমন পূর্ববর্তী পিছনভাগের ছবির প্রসারিত করার জন্য সাধারণভাবে করা হয়। repeat-x এবং repeat-y প্রতিবন্ধকতা পিছনভাগের ছবিকে শুধুমাত্র উপর এবং নীচের দিকে সমানভাবে প্রসারিত করে, no-repeat পিছনভাগের ছবিকে কোনও দিকেই প্রসারিত করতে দেয় না。

ডিফল্টভাবে, পিছনভাগের ছবি একটি তলবিগুলির উপর ডানদিকের উপর দিক থেকে শুরু করে থাকে। নিচের উদাহরণটি দেখুন:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

আপনার নিজের পরীক্ষা করুন

পিছনভাগ স্থানান্তর

ব্যবহার করা যেতে পারে background-position 属性পিছনভাগের ছবির স্থানান্তর করা।

নিচের উদাহরণটি বড় তলবিগুলিতে একটি পিছনভাগের ছবিকে কেন্দ্রীভূত করে দেয়:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

background-position 属性 প্রদান করার জন্য বেশ কিছু পদ্ধতি রয়েছে। প্রথমে, কিছু কীভুতপুরুষ শব্দগুলি: top, bottom, left, right এবং center ব্যবহার করা যেতে পারে। সাধারণত, এই কীভুতপুরুষ শব্দগুলি জোড়ায় ব্যবহৃত হয়, কিন্তু এটাই নয়। আরও, দৈর্ঘ্য মান, যেমন 100px বা 5cm ব্যবহার করা যেতে পারে, শেষপর্যন্ত শতপ্রতিশত মানও ব্যবহার করা যেতে পারে। বিভিন্ন ধরনের মান ব্যবহার করে পিছনভাগের ছবির স্থানান্তর করার জন্য কিছু পার্থক্য রয়েছে。

শব্দ

চিত্র স্থাপন শব্দমাত্রা সবচেয়ে বোঝা যায়, যার কাজ নাম অনুযায়ী। উদাহরণস্বরূপ, top right-এর মাধ্যমে চিত্রটি উপাদানের ডানদিকের উপরের কোণে স্থাপন করা হবে。

নিয়ম অনুসারে, স্থান শব্দমাত্রা কোনও কোনও ক্রমে দেওয়া যেতে পারে, যতক্ষণ তা দুই শব্দমাত্রা থাকে - একটি হলেন্দক দিকের এবং আরেকটি অনুমানিত দিকের。

যদি একটি শব্দমাত্রা দেওয়া হয়, তবে অন্য শব্দমাত্রা center হিসাবে গ্রহণ করা হবে。

তাই, যদি আপনি প্রত্যেক প্যারাগ্রাফের মাঝামাঝির উপরে একটি চিত্র দেখতে চান, তাহলে এইভাবে ঘোষণা করতে হবে:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

নিম্নরূপের সমতুল স্থান শব্দগুলি রয়েছে:

শতকরা মান

শতকরা মানটির প্রকাশনা অনেকটা জটিল। যদি আপনি চিত্রকে উপাদানের মধ্যে কেন্দ্রাভিমুখী করতে চান, তবে এটা অত্যন্ত সহজ:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

এটা চিত্রকে সঠিকভাবে স্থাপন করবে, যার কেন্দ্রবিন্দু উপাদানের কেন্দ্রবিন্দুর সাথে মাথায় নেওয়া হবে。অর্থাৎ, শতকরা মানটি উপাদান এবং চিত্রে উভয়ই প্রয়োগ করা হয়。অর্থাৎ, চিত্রে বর্ণিত 50% 50% এর বিন্দু (কেন্দ্রবিন্দু) এবং উপাদানে বর্ণিত 50% 50% এর বিন্দু (কেন্দ্রবিন্দু) একইভাবে মাথায় নেওয়া হবে。

যদি চিত্রটি 0% 0%-এ থাকে, তবে তার ডানদিকের উপরের কোণ উপাদানের ইন্ডেন্ট এর ডানদিকের উপরের কোণে থাকবে। যদি চিত্রটির স্থান 100% 100%-এ থাকে, তবে চিত্রটির ডানদিকের কোণ ডানদিকের মাঝামাঝির কোণে থাকবে。

তাই, যদি আপনি একটি চিত্রকে হলেন্দক দিকে 2/3 এবং অনুমানিত দিকে 1/3-এ রাখতে চান, তাহলে এইভাবে ঘোষণা করতে হবে:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

যদি শুধুমাত্র একটি শতকরা মান প্রদান করা হয়, তবে সেই মানটি অনুসারে হলেন্দক মান হবে, এবং অনুমানিত মান হবে 50%। এটা একই শব্দগুলির সমতুল।

background-position এর ডিফল্ট মান 0% 0% হয়, যা top left-এর সমতুল। এটা ব্যাখ্যা করে যেভাবে ব্যাকগ্রাউন্ড ইমেজ একটি উপাদানের ইন্ডেন্ট এর ডানদিকের উপরের কোণ থেকে প্রসারিত হয়, যদি আপনি অন্য স্থান মান না নির্ধারণ করেন।

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

পটভূমি সংযোগ

যদি ডকুমেন্ট অনেক দীর্ঘ হয়, তবে যখন ডকুমেন্ট নিচে সরবরাহ করা হয়, তখন পটভূমি ছবিটিও সরবরাহ করা হবে। যখন ডকুমেন্ট ছবির অবস্থানের বাইরে সরবরাহ করা হয়, তখন ছবিটি অদৃশ্য হবে。

আপনি এভাবে background-attachment এক্সিবলুটিএই ধরণের সরবরাহকে রোকতে, এই এক্সিবলুটিটির মাধ্যমে, ছবিটির অবস্থানকে প্রদর্শন ক্ষেত্রের সাথে স্থায়ী হিসাবে (fixed) ঘোষণা করা যায়, যার ফলে সরবরাহ থেকে প্রভাব পাবে না:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

আপনার নিজের পরীক্ষা করুন

background-attachment এক্সিবলুটির ডিফল্ট মান scroll হয়ে থাকে, অর্থাৎ, ডিফল্ট অবস্থায়, পটভূমি ডকুমেন্টের সাথে সরতে থাকে。

CSS คุณสมบัติพื้นหลัง

โทรศัพท์

คู่มืออ้างอิง CSS

ตัวอย่าง CSS

การทดสอบ CSS

ตูวเลิร์น CSS

ลิงก์ผู้สนับสนุน