প্রায় ওয়েব সাইটেই দেখা যায় পেছনে ফুল পেইজ ব্যাকগ্রাউন্ড ইমেজ থাকে চাই যা ব্রাউজারের পুরো জায়গা জুড়ে দেখা যায়। সিএসএস ব্যাবহার করে আমরা সহজেই এমন ব্যাকগ্রাউন্ড দিতে পারি। উদাহরন হিসেবে এটা দেখতে পারেন। এখানে গিয়ে জুম ইন আউট করে দেখুন, ব্যাকগ্রাউন্ড সব সময় একই সাইজে থাকে।
আর এমন ব্যাকগ্রাউন্ড দেওয়া খুব সহজঃ
html {
background: url(https://jakir.me/wp-content/uploads/2013/03/Future_Billings.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
আর পুরো উদাহরনের কোডঃ
<html>
<head>
<style>
html {
background: url(https://jakir.me/wp-content/uploads/2013/03/Future_Billings.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#container{
width:700px;
margin:50 auto;
padding:20px;
background:#fff;
opacity:.6;
}
</style>
</head>
<body>
<div id="container">
<h1>Here we use full width image as a background</h1>
<img src="http://jakir.me/wp-content/uploads/2013/03/fullpagebackground.png" />
</div>
</body>
</html>
পুনরাই মার খেলাম আমি । আবার প্রশংসা করতে হল বস ।
জাকির ভাই উপর এর html code রাখার box টা করার জন্য কিভাবে কোড করছেন ? এই টা কি বলা যাবে ?
এটাকে বলে Code Highlighter. গুগলে সার্চ করলে পেয়ে যাবেন।