CSS ব্যাকগ্রাউন্ড

CSS ব্যাকগ্রাউন্ড প্রপার্টি উপাদানের পটভূমি প্রভাব সংজ্ঞায়িত করতে ব্যবহৃত হয়। 5টি CSS ব্যাকগ্রাউন্ড বৈশিষ্ট্য রয়েছে যা HTML উপাদানগুলিকে প্রভাবিত করে:

পেছনের রং
ব্যাকগ্রাউন্ড-ইমেজ
পটভূমি পুনরাবৃত্তি
পৃষ্ঠভূমি সংযুক্তি
ব্যাকগ্রাউন্ড-অবস্থান

1) CSS ব্যাকগ্রাউন্ড-রঙ

উপাদানটির পটভূমির রঙ নির্দিষ্ট করতে ব্যাকগ্রাউন্ড-কালার প্রপার্টি ব্যবহার করা হয়।

আপনি এই মত পটভূমি রঙ সেট করতে পারেন:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h2,p{  
    background-color: #b0d4de;  
}  
</style>  
</head>  
<body>  
<h2>My first CSS page.</h2>  
<p>Hello Javatpoint. This is an example of CSS background-color.</p>  
</body>  
</html>   

আউটপুট:

আমার প্রথম CSS পেজ।

হ্যালো জাভাটপয়েন্ট। এটি CSS ব্যাকগ্রাউন্ড-রঙের একটি উদাহরণ।

2) CSS ব্যাকগ্রাউন্ড-ইমেজ

ব্যাকগ্রাউন্ড-ইমেজ প্রোপার্টি একটি ইমেজকে একটি উপাদানের পটভূমি হিসেবে সেট করতে ব্যবহৃত হয়। ডিফল্টরূপে ইমেজ সমগ্র উপাদান কভার. আপনি এই মত একটি পৃষ্ঠার জন্য ব্যাকগ্রাউন্ড ইমেজ সেট করতে পারেন.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
background-image: url(“paper1.gif”);  
margin-left:100px;  
}  
</style>  
</head>  
<body>  
<h1>Hello Javatpoint.com</h1>  
</body>  
</html>       

দ্রষ্টব্য: ব্যাকগ্রাউন্ড ইমেজ টেক্সট রঙ অনুযায়ী নির্বাচন করা উচিত. টেক্সট এবং ব্যাকগ্রাউন্ড ইমেজের খারাপ সংমিশ্রণ খারাপ ডিজাইন করা এবং পড়া যায় না এমন ওয়েবপৃষ্ঠার কারণ হতে পারে।

3) CSS ব্যাকগ্রাউন্ড-পুনরাবৃত্তি

ডিফল্টরূপে, পটভূমি-চিত্র বৈশিষ্ট্য অনুভূমিকভাবে এবং উল্লম্বভাবে পটভূমি চিত্র পুনরাবৃত্তি করে। কিছু ছবি শুধুমাত্র অনুভূমিকভাবে বা উল্লম্বভাবে পুনরাবৃত্তি হয়।

পটভূমিটি আরও ভাল দেখায় যদি চিত্রটি কেবল অনুভূমিকভাবে পুনরাবৃত্তি হয়।

background-repeat: repeat-x;

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-image: url(“gradient_bg.png”);  
    background-repeat: repeat-x;  
}  
</style>  
</head>  
<body>  
<h1>Hello Javatpoint.com</h1>  
</body>  
</html>   

background-repeat: repeat-y;

 
<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-image: url(“gradient_bg.png”);  
    background-repeat: repeat-y;  
}  
</style>  
</head>  
<body>  
<h1>Hello Javatpoint.com</h1>  
</body>  
</html>   

4) CSS ব্যাকগ্রাউন্ড-সংযুক্তি

ব্যাকগ্রাউন্ড-অ্যাটাচমেন্ট প্রপার্টি ব্যাকগ্রাউন্ড ইমেজ ঠিক করা আছে কিনা তা নির্দিষ্ট করতে বা ব্রাউজার উইন্ডোতে বাকি পৃষ্ঠার সাথে স্ক্রোল করা হয়। আপনি যদি ব্যাকগ্রাউন্ড ইমেজ ফিক্সড সেট করেন তাহলে ব্রাউজারে স্ক্রল করার সময় ছবিটি সরবে না। স্থির ব্যাকগ্রাউন্ড ইমেজ সহ একটি উদাহরণ নেওয়া যাক।

background: white url(‘bbb.gif’);  
background-repeat: no-repeat;  
background-attachment: fixed;  

5) CSS ব্যাকগ্রাউন্ড-পজিশন

ব্যাকগ্রাউন্ড-পজিশন প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের প্রারম্ভিক অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। ডিফল্টরূপে, ব্যাকগ্রাউন্ড ইমেজটি ওয়েবপেজের উপরের-বামে রাখা হয়।

আপনি নিম্নলিখিত অবস্থান সেট করতে পারেন:

কেন্দ্র
শীর্ষ
নীচে
বাম
অধিকার

background: white url(‘good-morning.jpg’);  
background-repeat: no-repeat;  
background-attachment: fixed;  
background-position: center;   

CSS Background