সিএসএস দিয়ে একের অধিক ব্যাকগ্রাউন্ড ইমেজ দেওয়া।

Awesome! টিউনস

সকল Awesome! টিউনস

এ মাসের টেকটিউনস সংবাদঃ ডিসেম্বর-২০০৯

রনি পারভেজ

এক সাথে যত খুশি ততো ই-মেইল চেক করুন ডেস্কটপ থেকে! প্রয়োজনীয় না হলে মূল্য ফেরত

হাসান যোবায়ের

হয়ে উঠুন পেনড্রাইভ ভাইরাস/ম্যালওয়্যার কিলার

এস বি মেহদি

ওয়েবসাইট তৈরী এবং হোস্টিং এর কয়েকটি ফ্রি অনলাইন টুল

দুঃসাহসী টিনটিন

2,403 দেখা 1 টিউমেন্টস জোসস

টিউন বিভাগ সিএসএস

প্রকাশিত

Level 0

জাকির হোসাইন

224 টিউনস 1487 টিউমেন্টস 5 ফলোয়ার

টিউমেন্ট ফলো জোসস

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

যেমনঃ

background-image: url(grass.png), url(bird.png);

এবং আপনি সিএসএস ব্যাকগ্রাউন্ড ইমেজের সকল বৈশিষ্ট ব্যবহার করতে পারবেন, যেমনঃ

background-position: left bottom, center top;

background-repeat: repeat-x,no-repeat;

ইত্যাদি।

নিচের ছবিটি দেখুন। এখানে চিলটি একটি ব্যাকগ্রাউন্ড ইমেজ এবং নিচের ঘাস গুলো আরেকটি ব্যাকগ্রাউন্ড ইমেজ। এভাবে ইচ্ছে করলে মাঝখানে বা অন্য কোথাও একই ভাবে আরো ব্যাক গ্রাউন্ড ইমেজ যোগ করা যাবে। যা একটি ক্রিয়েটিভ সাইট তৈরি করতে অনেক বেশি সাহায্য করবে।

উদাহরনের কোড গুলোঃ

HTML কোডঃ


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />

<title>Multiple Background Image</title>
</head>
<body>
 <div class="bgimage"></div>

</body>
</html>

এবং সিএসএস কোডঃ


.bgimage {
width: 500px;
height: 700px;
background-image: url(grass.png), url(bird.png);
background-position: left bottom, center top;
background-repeat: repeat-x,no-repeat;
margin:auto;
border:1px solid #ccc;
}

আর উদাহরন ডাউনলোড করে দেখতে চাইলে এখান থেকে ডাউনলোড করে দেখতে পারেন।

CSS ব্যাক গ্রাউন্ড ইমেজের অন্যান্য পজিশন গুলো, যা কাজে লাগতে পারেঃ

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

আরো আছেঃ xpos ypos যা দিয়ে x এর দিকে কতটুকু তা এবং y এর দিকে কতটুকু হবে তা নির্ধারন করে দেওয়া যায়। আবার x% y% দিয়েও একই কাজ করা যায়।

টেকটুইটস ব্লগে আমার পোস্ট গুলো।

টিউমেন্ট ফলো জোসস

Level 0

জাকির হোসাইন

আমি জাকির হোসাইন। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 224 টি টিউন ও 1487 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

পৃথিবীতে অল্পকয়েক দিনের জন্য অনেকেই আসে, হেঁটে খেলে চলে যায়। এর মধ্যে অল্প কয়েক জনই পায়ের চাপ রেখে যায়।ওদের একজন হতে ইচ্ছে করে। প্রযুক্তির আরেকটি সেরা ব্লগ টেকটুইটস। আপনাদের স্বাগতম, যেখানে প্রতিটি বন্ধুর অংশ গ্রহনে গড়ে উঠেছে একটি পরিবার। আপনাদের পছন্দ হবে আশা করি। ফেসবুকে আমি - ?জাকির!