ব্যাকগ্রাউন্ড-সংক্রান্ত CSS প্রপার্টি

Articles

এই প্রবন্ধে ব্যাকগ্রাউন্ড-সংক্রান্ত CSS প্রপার্টির ব্যাখ্যা করা হয়েছে।

আপনি ব্যাকগ্রাউন্ড সেটিং, অবস্থান এবং পুনরাবৃত্তির মতো প্রপার্টি বর্ণনা করার উপায় শিখতে পারবেন।

YouTube Video

পূর্বরূপের জন্য HTML তৈরি করা

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

ব্যাকগ্রাউন্ড এবং ডেকোরেশন

`background-color` প্রপার্টি

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

background-color প্রপার্টি CSS-এ একটি উপাদানের ব্যাকগ্রাউন্ড রঙ সেট করার জন্য ব্যবহৃত হয়। আপনি টেক্সট এবং অন্যান্য উপাদানের পিছনে প্রদর্শিত রঙ নির্ধারণ করতে পারেন, এবং রঙ বিভিন্ন ফরম্যাটে নির্ধারণ করা যেতে পারে। রং নির্ধারণের পদ্ধতি color প্রপার্টির অনুরূপ, তবে আপনি transparent ব্যবহার করে একটি সম্পূর্ণ স্বচ্ছ ব্যাকগ্রাউন্ডও নির্ধারণ করতে পারেন।

ব্যাখ্যা:

red-example ক্লাসটি কীওয়ার্ড ব্যবহার করে পটভূমির রংকে লাল হিসাবে নির্ধারণ করে।
hex-example ক্লাসটি হেক্সাডেসিমাল কোড ব্যবহার করে পটভূমির রং নির্ধারণ করে।
rgb-example ক্লাসটি RGB ফর্ম্যাট ব্যবহার করে পটভূমির রং নির্ধারণ করে।
rgba-example ক্লাসটি RGBA ফর্ম্যাট ব্যবহার করে পটভূমির রং নির্ধারণ করে এবং স্বচ্ছতা যোগ করে।
hsl-example ক্লাসটি HSL ফর্ম্যাট ব্যবহার করে পটভূমির রং নির্ধারণ করে।
hsla-example ক্লাসটি HSLA ফর্ম্যাট ব্যবহার করে পটভূমির রং নির্ধারণ করে এবং স্বচ্ছতা যোগ করে।
transparent-example ক্লাসটি পটভূমিকে স্বচ্ছ হিসাবে সেট করে।

`background-image` প্রপার্টি

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

background-image প্রপার্টি একটি উপাদানের ব্যাকগ্রাউন্ড হিসাবে একটি চিত্র সেট করতে ব্যবহৃত হয়। নির্দিষ্ট চিত্রটি উপাদানের ব্যাকগ্রাউন্ড হিসাবে প্রদর্শিত হয়, এবং এর আকার, অবস্থান এবং পুনরাবৃত্তির পদ্ধতি অন্যান্য সম্পর্কিত প্রপার্টির সাহায্যে সামঞ্জস্য করা যেতে পারে। আমরা পরে background-size, background-position, এবং background-repeat এর মতো সম্পর্কিত প্রপার্টিগুলিও ব্যাখ্যা করব।

ব্যাখ্যা:

background-image-example ক্লাসটি background-image প্রপার্টি ব্যবহার করে image.jpg কে পটভূমি হিসেবে সেট করে। background-size: cover চিত্রটিকে পুরো উপাদান জুড়ে প্রদর্শন করে এবং background-position: center চিত্রটিকে কেন্দ্রীভূত করে। পুনরাবৃত্তি background-repeat: no-repeat দিয়ে নিষ্ক্রিয় করা হয়।
background-image-gradient ক্লাসটি লাল থেকে নীল পর্যন্ত একটি ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট সেট করার জন্য linear-gradient() ব্যবহার করে। গ্রেডিয়েন্টটি বাম থেকে ডানে প্রদর্শিত হয়।

বিনির্দেশ হতে পারে এমন মানের প্রকার

background-image প্রপার্টি নিচের মানগুলি গ্রহণ করতে পারে।

url(): ব্যাকগ্রাউন্ড ছবির URL নির্দিষ্ট করে। url() এর ভিতরে চিত্র ফাইল অন্তর্ভুক্ত করুন। (ex.url('image.jpg'))
none: কোনো ব্যাকগ্রাউন্ড ইমেজ সেট না করার নির্দেশ দেয়। এটি ডিফল্ট মান।
গ্রেডিয়েন্ট: CSS গ্রেডিয়েন্ট ফিচারের মাধ্যমে গ্রেডিয়েন্টগুলিকে ব্যাকগ্রাউন্ড চিত্র হিসেবে সেট করাও সম্ভব। (ex.linear-gradient(), radial-gradient())

`background-image` প্রোপার্টির প্রধান বৈশিষ্ট্যসমূহ।

ছবির আকার এবং অবস্থান: অন্য প্রোপার্টির মাধ্যমে ব্যাকগ্রাউন্ড ছবির আকার এবং অবস্থান সামঞ্জস্যভাবে নিয়ন্ত্রণ করা যায়, যা ডিজাইনে পরিবর্তনের সুযোগ করে দেয়। উদাহরণস্বরূপ, background-size: cover নির্দিষ্ট করলে ছবিটি পুরো এলাকাজুড়ে প্রসারিত হয় এবং কোনো কাটিং থাকে না।
গ্রেডিয়েন্ট ব্যবহার করা: একটি ছবির পরিবর্তে, আপনি পটভূমি হিসাবে একটি গ্রেডিয়েন্ট ব্যবহার করতে পারেন, যা নকশায় একটি গতিশীল উপাদান যোগ করবে।

`background-position` প্রোপার্টি

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

background-position প্রোপার্টি একটি উপাদানের মধ্যে ব্যাকগ্রাউন্ড ছবির অবস্থান নির্দিষ্ট করতে ব্যবহৃত হয়। উপাদানের মধ্যে ব্যাকগ্রাউন্ড ছবি কোথায় প্রদর্শিত হবে তা নিয়ন্ত্রণ করে, আপনি এমন লেআউট তৈরি করতে পারেন যা আপনার ডিজাইনের সাথে মানানসই। ডিফল্ট হল 0% 0%, যা ছবিটিকে উপরের বাম কোণে স্থাপন করে।

ব্যাখ্যা:

top-left-example ক্লাসটি ছবি অবস্থানকে top left হিসাবে নির্ধারণ করে, যা ছবিকে উপরের-বাম কোণে স্থাপন করে।
center-example ক্লাসটি center অ্যাট্রিবিউট ব্যবহার করে ছবিকে কেন্দ্রস্থ করে।
bottom-right-example ক্লাসটি ছবি অবস্থানকে bottom right হিসাবে নির্ধারণ করে, যা ছবিকে নিচের-ডান কোণে স্থাপন করে।

বিনির্দেশ হতে পারে এমন মানের প্রকার

background-position প্রপার্টি নিম্নলিখিত ধরণের মান গ্রহণ করতে পারে।

কীওয়ার্ড: আপনি left, right, top, bottom, center নির্ধারণ করতে পারেন।
- center নির্দিষ্ট করলে ব্যাকগ্রাউন্ড ছবি উপাদানের কেন্দ্রে স্থাপন করা হবে।
- right নির্দিষ্ট করলে ব্যাকগ্রাউন্ড ছবি ডানদিকে স্থাপন করা হবে।
- top left নির্দিষ্ট করলে ব্যাকগ্রাউন্ড ছবি উপরের বাম কোণে স্থাপন করা হবে।
- ‘নিচে ডান’ নির্দিষ্ট করলে ব্যাকগ্রাউন্ড ছবি নিচের ডান কোণে স্থাপন করা হবে।
দৈর্ঘ্য বা শতাংশ: আপনি 10px 20px, 50% 50% এর মতো মান নির্দিষ্ট করতে পারেন।
- 10px 20px নির্দিষ্ট করলে ব্যাকগ্রাউন্ড ছবি বাম দিক থেকে 10px এবং উপরের দিক থেকে 20px দূরে স্থাপন করা হবে।
- 50% 50% নির্দিষ্ট করলে ব্যাকগ্রাউন্ড ছবি অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রে স্থাপন করা হবে।
calc() ফাংশন: CSS গণনার মাধ্যমে আরও সুনির্দিষ্ট অবস্থান নির্ধারণ করতে সাহায্য করে।

`background-size` প্রপার্টি

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

background-size প্রপার্টি একটি উপাদানের ব্যাকগ্রাউন্ড ছবির আকার নির্ধারণ করতে ব্যবহৃত হয়। এই প্রপার্টি ব্যবহার করে আপনি নির্ধারণ করতে পারেন ব্যাকগ্রাউন্ড ছবি কিভাবে প্রদর্শিত হবে - এটি পুরো উপাদান পূর্ণ করবে অথবা এর আসল আকার যেমন ছিল তেমন থাকবে, যা ডিজাইনের সাথে মিলবে। ডিফল্ট মান auto, যা ব্যাকগ্রাউন্ড ছবির মূল আকার বজায় রাখে।

ব্যাখ্যা:

cover-example ক্লাসটি cover নির্ধারণ করে। ছবিটি পুরো উপাদান ঢেকে রাখার জন্য বড় করা হবে, কিন্তু কিছু অংশ কাটা যেতে পারে।
contain-example ক্লাসটি contain নির্ধারণ করে। ছবিটি উপাদানের মধ্যে ফিট করার জন্য সামঞ্জস্য করা হবে, তবে কিছু খালি স্থান থাকতে পারে।
fixed-size-example ক্লাসটি পটভূমি ছবির জন্য একটি নির্দিষ্ট আকার নির্ধারণ করে, যেখানে প্রস্থ এবং উচ্চতা প্রতিটি 100px করা হয়।

বিনির্দেশ হতে পারে এমন মানের প্রকার

background-size প্রপার্টিতে নীচের ধরণের মান সেট করা যেতে পারে।

কীওয়ার্ডসমূহ
- auto: ছবির ডিফল্ট আকার বজায় রাখে (প্রস্থ এবং উচ্চতা স্বয়ংক্রিয়ভাবে নির্ধারিত হয়)।
- cover: ব্যাকগ্রাউন্ড ছবির আকার উপাদান পুরোপুরি ঢেকে ফেলতে সামঞ্জস্য করে। এটি পুরো উপাদান পূর্ণ করবে, তবে ছবির কিছু অংশ ছাঁটা হতে পারে।
- contain: ছবিটি উপাদানের মধ্যে ফিট করার জন্য সামঞ্জস্য করে, তবে পুরো উপাদান ঢেকে রাখে না। ছবির দিক অনুপাত বজায় রাখা হয়।
সংখ্যামূলক মান (px, %, em, ইত্যাদি)
- প্রস্থ এবং উচ্চতা: সুনির্দিষ্টভাবে প্রস্থ এবং উচ্চতা নির্ধারণ করুন। যদি শুধুমাত্র একটি মান নির্ধারণ করা হয়, এটি প্রস্থের জন্য প্রযোজ্য হবে এবং উচ্চতা স্বয়ংক্রিয়ভাবে সামঞ্জস্য করা হবে।
- শতাংশ: উপাদানের আকার হিসেবে ব্যাকগ্রাউন্ড ছবির আকার শতাংশে নির্ধারণ করুন। উদাহরণস্বরূপ, 50% 50% ইমেজটিকে উপাদানের প্রস্থ এবং উচ্চতার অর্ধেক সেট করে।

`background-repeat` প্রপার্টি

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

background-repeat প্রপার্টি ব্যবহার করে একটি উপাদানের ব্যাকগ্রাউন্ড ইমেজ কীভাবে পুনরাবৃত্তি হবে তা নিয়ন্ত্রণ করা হয়। ডিফল্টরূপে, ব্যাকগ্রাউন্ড ইমেজ একটি উপাদানের মধ্যে অনুভূমিক এবং উল্লম্বভাবে পুনরাবৃত্তি হয়, তবে আপনি এই প্রপার্টি ব্যবহার করে পুনরাবৃত্তির আচরণ কাস্টমাইজ করতে পারেন।

ব্যাখ্যা:

repeat-example ক্লাসটি ছবিকে উলম্ব এবং অনুভূমিক উভয়ভাবে পুনরাবৃত্তি করে প্রদর্শন করে।
repeat-x-example ক্লাসটি ছবিকে শুধু অনুভূমিকভাবে পুনরাবৃত্তি করে।
no-repeat-example ক্লাসটি ছবিকে পুনরাবৃত্তি ছাড়াই একবার দেখায়।
space-example ক্লাসটি পটভূমি ছবিগুলিকে সমান স্থান দিয়ে সজ্জিত করে।
round-example ক্লাসটি স্বয়ংক্রিয়ভাবে পটভূমি ছবির আকার পরিবর্তন করে এবং সম্পূর্ণ উপাদান পূরণ করতে পুনরাবৃত্তি করে।

যে মান নির্ধারণ করা যেতে পারে

background-repeat প্রপার্টিতে নীচের ধরণের মান সেট করা যেতে পারে।

repeat: ব্যাকগ্রাউন্ড ইমেজ X-অক্ষ (অনুভূমিক) এবং Y-অক্ষ (উল্লম্ব)-এর বরাবর পুনরাবৃত্তি হয়। এটি ডিফল্ট মান।
repeat-x: ব্যাকগ্রাউন্ড ইমেজ শুধুমাত্র X-অক্ষ (অনুভূমিক)-এর বরাবর পুনরাবৃত্তি হয়।
repeat-y: ব্যাকগ্রাউন্ড ইমেজ শুধুমাত্র Y-অক্ষ (উল্লম্ব)-এর বরাবর পুনরাবৃত্তি হয়।
no-repeat: ব্যাকগ্রাউন্ড ইমেজ পুনরাবৃত্তি হয় না এবং কেবল একবারই প্রদর্শিত হয়।
space: ব্যাকগ্রাউন্ড ইমেজ নির্দিষ্ট বিরতিতে পুনরাবৃত্তি হয়, যেখানে ফাঁক সমানভাবে বিতরণ করা হয়।
round: ব্যাকগ্রাউন্ড ইমেজ পুনরাবৃত্তি হয়, তবে পুরো উপাদানটি পূরণ করতে আকার সমন্বয় করা হয়। ইমেজটিকে আকার পরিবর্তন করা হতে পারে।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

বক্স মডেলের সাথে সম্পর্কিত CSS প্রোপার্টিসমূহ বক্স মডেল সজ্জার সাথে সম্পর্কিত CSS প্রোপার্টিগুলি

ব্যাকগ্রাউন্ড-সংক্রান্ত CSS প্রপার্টি

YouTube Video

পূর্বরূপের জন্য HTML তৈরি করা

ব্যাকগ্রাউন্ড এবং ডেকোরেশন

background-color প্রপার্টি

ব্যাখ্যা:

background-image প্রপার্টি

ব্যাখ্যা:

বিনির্দেশ হতে পারে এমন মানের প্রকার

background-image প্রোপার্টির প্রধান বৈশিষ্ট্যসমূহ।

background-position প্রোপার্টি

ব্যাখ্যা:

বিনির্দেশ হতে পারে এমন মানের প্রকার

background-size প্রপার্টি

ব্যাখ্যা:

বিনির্দেশ হতে পারে এমন মানের প্রকার

background-repeat প্রপার্টি

ব্যাখ্যা:

যে মান নির্ধারণ করা যেতে পারে

YouTube Video

`background-color` প্রপার্টি

`background-image` প্রপার্টি

`background-image` প্রোপার্টির প্রধান বৈশিষ্ট্যসমূহ।

`background-position` প্রোপার্টি

`background-size` প্রপার্টি

`background-repeat` প্রপার্টি