কম্পিউটার টিউটোরিয়াল

CSS দিয়ে এলিমেন্টের ব্যাকগ্রাউন্ড স্টাইল করা

এলিমেন্টের ব্যাকগ্রাউন্ড স্টাইল করতে ব্যাকগ্রাউন্ড ইমেজ, ব্যাকগ্রাউন্ড পজিশন সেট করুন। এর সাথে ব্যাকগ্রাউন্ড রিপিট সেট করে ইমেজ আড়াঘাড় বা লম্বা দিয়ে রিপিট করান।

background-position

ব্যাকগ্রাউন্ড ইমেজের শুরু পজিশন সেট করতে background-position প্রোপার্টি ব্যবহার করুন।

উদাহরণ

একটি উদাহরণ:

<!DOCTYPE html> <html> <head> <style> body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png");    background-repeat: no-repeat;    background-attachment: fixed;    color: blue;    background-position: left center; } .demo {    text-decoration: overline underline; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>

আউটপুট

CSS দিয়ে এলিমেন্টের ব্যাকগ্রাউন্ড স্টাইল করা

background-repeat

CSS-এ ব্যাকগ্রাউন্ড ইমেজ কীভাবে রিপিট হবে তা সেট করতে background-repeat প্রোপার্টি ব্যবহার করুন। প্রোপার্টি মানগুলো হতে পারে:

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

উদাহরণ

একটি উদাহরণ:

<!DOCTYPE html> <html> <head> <style> body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png");    background-repeat: repeat-x;    background-color: blue;    color: white; } .demo {    text-decoration: overline underline; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>

আউটপুট

CSS দিয়ে এলিমেন্টের ব্যাকগ্রাউন্ড স্টাইল করা


  1. CSS ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ সেট করা

  2. CSS ব্যবহার করে এলিমেন্টের চারপাশে মার্জিন স্পেস সেট করা

  3. CSS Z-Index ব্যবহার করে এলিমেন্ট ওভারল্যাপ করা

  4. CSS দিয়ে ব্যাকগ্রাউন্ড রিপিট (Background Repeat) ব্যবহার করা