সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস ব্যাকগ্রাউন্ড


এইচটিএমএল পেজ বা এলিমেন্টের ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টি ব্যবহার করা হয়।

সিএসএস ব্যাকগ্রাউন্ডসংক্রান্ত প্রোপার্টিসমূহঃ

  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-attachment


এক নজরে সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টিসমূহ

background

একটি ডিক্লেয়ারেশনের মধ্যে সকল ব্যাকগ্রাউন্ড প্রোপার্টি সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-attachment

পেজের ব্যাকগ্রাউন্ড ইমেজ ফিক্সড থাকবে নাকি স্ক্রল হবে তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-color

একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড কালার সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-image

একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড ইমেজ সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-position

ব্যাকগ্রাউন্ড ইমেজের পজিশন সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-repeat

ব্যাকগ্রাউন্ড ইমেজ কিভাবে রিপিট হবে, তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।



background-color

একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার সেট করার জন্য background-color প্রোপার্টিটি ব্যবহার করা হয়।

সিএসএস দিয়ে একটি সম্পূর্ণ পেজের ব্যাকগ্রাউন্ড কালার সেট করার জন্য নিচের পদ্ধতি অবলম্বন করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    background-color: ForestGreen;
  }
  </style>
</head>
<body>

  <h1>ব্যাকগ্রাউন্ড কালার</h1>
  <p>এই পেজটির ব্যাকগ্রাউন্ডের কালার ForestGreen সেট করা হয়েছে।</p>

</body>
</html>

ফলাফল





সিএসএস দিয়ে কালার করতে অধিকাংশ ক্ষেত্রেই নিম্নোক্ত পদ্ধতিসমূহ ব্যবহৃত হয়ঃ

  • কালারের নাম ব্যবহার করে। যেমন- "red"
  • HEX ভ্যালু ব্যবহার করে। যেমন- "#ff0000"
  • RGB ভ্যালু ব্যবহার করে। যেমন- "rgb(255,0,0)"

সম্ভাব্য সমস্ত কালার ভ্যালুর তালিকা এক নজরে দেখার জন্য সিএসএস কালার ভ্যালু পেজে ভিজিট করুন।

নিচের উদাহরণে <h1>, <p> এবং <div> এলিমেন্টের ব্যাকগ্রাউন্ড কালারসমূহ ভিন্ন ভিন্ন ভাবে সেট করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  h2 {
    background-color: blue;
    color: white;
  }
  div {
    background-color: green;
  }
  p {
    background-color: red;
  }
  </style>
</head>
<body>

  <h2>CSS এর মাধ্যমে ব্যাকগ্রাউন্ডে কালার দেয়ার উদাহরণ।</h1>
  <div>
    এটি একটি div এলিমেন্ট।
    <p>এই প্যারাগ্রাফটির নিজস্ব ব্যাকগ্রাউন্ড কালার দেয়া আছে.</p>
    আমরা এখনো div এলিমেন্টের মধ্যে আছি।
  </div>

</body>
</html>

ফলাফল





background-image

এলিমেন্টের ব্যাকগ্রাউন্ডে ছবি বা ইমেজ সেট করার জন্য background-image প্রোপার্টিটি ব্যবহার করা হয়।

সম্পূর্ণ এলিমেন্টকে কাভার করার জন্য ডিফল্টভাবে ইমেজটির পূনরাবৃত্তি ঘটে।

একটি পেজে কিভাবে ব্যাকগ্রাউন্ড ইমেজ সেট করা হয় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    background-image: url("paper.jpg");
  }
  </style>
</head>
<body>

  <h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
  <p>এই পেইজের ব্যাকগ্রাউন্ডে একটি ইমেজ দেয়া আছে।</p>

</body>
</html>

ফলাফল





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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    background-image: url("paper.jpg");
    color: sienna;
  }
  </style>
</head>
<body>

  <h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
  <p>ব্যাকগ্রাউন্ড ইমেজের জন্য লেখাগুলো সঠিকভাবে পড়া যাচ্ছে না।</p>

</body>
</html>

ফলাফল



বিঃদ্রঃ যখন ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করবেন, তখন টেক্সটের কালার এবং এমন ইমেজ ব্যবহার করবেন যেন টেক্সট পড়তে সমস্যা না হয়।



background-repeat: repeat-x; & repeat-y;

background-image প্রোপার্টি ডিফল্টভাবে একটি ইমেজকে অনুভূমিক এবং উল্লম্ব উভয় দিকেই পুনরাবৃত্তি করে।

কিছু ইমেজকে হয় অনুভূমিকভাবে আর নয় উল্লম্বভাবে পুনরাবৃত্তি করা উচিত, তা না হলে এগুলো দেখতে অদ্ভুত লাগবে। যেমনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    background-image: url("paper2.jpg");
  }
  </style>
</head>
<body>

  <h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
  <p>ব্যাকগ্রাউন্ডের ইমেজটি দেখতে অদ্ভুত লাগছে!!!</p>
  <br><br><br><br><br><br><br><br>

</body>
</html>

বিঃদ্রঃ স্পেসিফিকভাবে নির্দিষ্ট করে না দেয়া হলে ব্যাকগ্রাউন্ড ইমেজ x এবং y উভয় অক্ষেই পুনরাবৃত্তি করবে।

ফলাফল





শুধুমাত্র অনুভূমিকভাবে ইমেজ রিপিট করার জন্য background-repeat: repeat-x; ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    background-image: url("paper2.jpg");
    background-repeat: repeat-x;
  }
  </style>
</head>
<body>

  <h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
  <p>এখানে ব্যাকগ্রাউন্ডের ইমেজটি শুধুমাত্র x অক্ষে রিপিট করেছে।</p>
  <br><br><br><br><br><br><br><br>

</body>
</html>

ফলাফল



পরামর্শঃ একইভাবে ইমেজকে উলম্বভাবে রিপিট করার জন্য background-repeat: repeat-y; সেট করুন।



background-position প্রোপার্টি এবং no-repeat ভ্যালুর ব্যবহার

আপনি যদি ব্যাকগ্রাউন্ড ইমেজকে শুধুমাত্র একবার দেখাতে চান তাহলে background-repeat প্রোপার্টির ভ্যালু no-repeat সেট করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    background-image: url("paper2.jpg");
    background-repeat: no-repeat;
  }
  </style>
</head>
<body>

  <h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
  <p>ব্যাকগ্রাউন্ড ইমেজটি একবার প্রদর্শিত হবে কিন্তু এটি পাঠককে পড়ায় বিরক্তির সৃষ্টি করে।</p>

</body>
</html>

ফলাফল





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

background-position প্রোপার্টি দ্বারা ইমেজের পজিশন পরিবর্তন করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    background-image: url("paper2.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 250px;
  }
  </style>
</head>
<body>

  <h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
  <p>ব্যাকগ্রাউন্ডের ইমেজটিতে no-repeat পজিশন দেয়া আছে।</p>
  <p>ইমেজটি একবার প্রদর্শিত হবে এবং তা ব্রাউজারের উপরের ডানে থাকবে।</p>
  <p>এই উদাহরণটিতে ইমেজটিতে মার্জিন ব্যবহার করা হয়েছে যাতে ইমেজটি পাঠককে পড়ার সময় বিরক্তির সৃষ্টি না করে।</p>

</body>
</html>

ফলাফল





background-attachment

ব্যাকগ্রাউন্ড ইমেজটি ব্যাকগ্রাউন্ডে ফিক্সড থাকবে নাকি স্ক্রলের সাথে নড়বে সেটি নির্ধারণ করার জন্য background-attachment প্রোপার্টিটি ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    background-image: url("paper2.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 250px;
    background-attachment: fixed;
  }
  </style>
</head>
<body>

  <h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
  <p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
  <p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
  <p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
  <p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
  <p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
  <p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
  <p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
  <p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
  <p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
  <p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>

</body>
</html>

ফলাফল





background - শর্টহ্যান্ড প্রোপার্টি

কোড সংক্ষিপ্ত করার জন্য সকল ব্যাকগ্রাউন্ড প্রোপার্টিকে একটি সিঙ্গেল প্রোপার্টির মধ্যে লেখা সম্ভব। একে শর্টহ্যান্ড প্রোপার্টি বলে

background হলো ব্যাকগ্রাউন্ডের জন্য শর্টহ্যান্ড প্রোপার্টিঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    background: #ffffff url("paper2.jpg") no-repeat right top;
    margin-right: 250px;
  }
  </style>
</head>
<body>

<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>এখন ব্যাকগ্রাউন্ডের ছবিটি একবারই দেখা যাবে এবং এটিকে টেক্সট থেকে সরিয়ে নেওয়া হয়েছে।</p>
<p>এই উদাহরণের ডানপাশে মার্জিন যোগ হয়েছে, যাতে ছবিটি পাঠককে পড়ার সময়ে কোন ধরনের বিরক্তির সৃষ্টি না করতে পারে।</p>

</body>
</html>

ফলাফল



যখন শর্টহ্যান্ড প্রোপার্টি ব্যবহার করবেন তখন নিচের ক্রম ঠিক রাখুনঃ

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

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