Background Image using css

আপনি চাইলে ব্যাকগ্রাউন্ড কালারের সাথে সাথে একটি ইমেজও রাখতে পারেন। যেমন body এর মাঝে ব্যাকগ্রাউন্ড ইমেজ যোগ করতে পারেন নিচের মতঃ

selector{
     background: url(http://bangla.codingpractise.com//tutorial.PNG)
}

এখানে selector মানে যেকোন html tag অথবা id অথবা class হতে পারে। url এর ভেতরে একটি ইমেজ এর লিংক দিয়ে দিলেই হবে। background: না লিখে background-image: লিখলেও হবে। অর্থাৎ উপরের css টা নিচের মতও লিখতে পারেনঃ

selector{
  background-image: url(http://bangla.codingpractise.com//tutorial.PNG)
}

সম্পূর্ন কোডঃ

<!DOCTYPE html>
<html>
<head>
	<title>Background Image</title>
</head>
<style type="text/css">
	.bg-image{
		background-image: url(http://bangla.codingpractise.com//tutorial.PNG); 
	}
</style>
<body>
	<p class="bg-image">
      This is dummy paragraph inside body tag.<br/>
      body has a background image <br/>
      this text is shown above an image because there is an image.<br/>
      I show how to set background image in a paragraph tag. <br/> 
      You can set background image with any block level element. <br/>
      এই লেখাগুলোর নিচে একটি ব্যকগ্রাউন্ড ইমেজ দেখতে পাচ্ছেন।<br/>
      আপনি চাইলে এভাবে যেকোন html element এর সাথে ব্যকগ্রাউন্ড ইমেজ যোগ করতে পারেন।
      the following lines are duplicates intentionally:
       This is dummy paragraph inside body tag.<br/>
      p tag has a background image <br/>
      this text is shown above an image because there is an image.<br/>
      I show how to set background image in a paragraph tag. <br/> 
      You can set background image with any block level element. <br/>
      এই লেখাগুলোর নিচে একটি ব্যকগ্রাউন্ড ইমেজ দেখতে পাচ্ছেন।<br/>
      আপনি চাইলে এভাবে যেকোন html element এর সাথে ব্যকগ্রাউন্ড ইমেজ যোগ করতে পারেন।
       This is dummy paragraph inside body tag.<br/>
      p tag has a background image <br/>
      this text is shown above an image because there is an image.<br/>
      I show how to set background image in a paragraph tag. <br/> 
      You can set background image with any block level element. <br/>
      এই লেখাগুলোর নিচে একটি ব্যকগ্রাউন্ড ইমেজ দেখতে পাচ্ছেন।<br/>
      আপনি চাইলে এভাবে যেকোন html element এর সাথে ব্যকগ্রাউন্ড ইমেজ যোগ করতে পারেন।
 
      -- Happy Coding
  
  </p>
</body>
</html>

ফলাফল

এখানে একটি ব্যপার লক্ষ্যকরুন, ইমেজ টা দুইবার দেখাচ্ছে। এই যে, ইমেজটা রিপিট হচ্ছে এইটা আপনি চাইলে বন্ধ করে দিতে পারেন নিচের লাইনটার মাধ্যমেঃ

background-repeat: no-repeat;

নিচের কোডটি দেখুনঃ

<!DOCTYPE html>
<html>
<head>
	<title>Background Image</title>
</head>
<style type="text/css">
	.bg-image2{
		background-image: url(http://bangla.codingpractise.com//tutorial.PNG); 
background-repeat: no-repeat;
	}
</style>
<body>
	<p class="bg-image2">
      This is dummy paragraph inside body tag.<br/>
      p tag has a background image <br/>
      this text is shown above an image because there is an image.<br/>
      I show how to set background image in a paragraph tag. <br/> 
      You can set background image with any block level element. <br/>
      এই লেখাগুলোর নিচে একটি ব্যকগ্রাউন্ড ইমেজ দেখতে পাচ্ছেন।<br/>
      আপনি চাইলে এভাবে যেকোন html element এর সাথে ব্যকগ্রাউন্ড ইমেজ যোগ করতে পারেন।
      the following lines are duplicates intentionally:
       This is dummy paragraph inside body tag.<br/>
      p tag has a background image <br/>
      this text is shown above an image because there is an image.<br/>
      I show how to set background image in a paragraph tag. <br/> 
      You can set background image with any block level element. <br/>
      এই লেখাগুলোর নিচে একটি ব্যকগ্রাউন্ড ইমেজ দেখতে পাচ্ছেন।<br/>
      আপনি চাইলে এভাবে যেকোন html element এর সাথে ব্যকগ্রাউন্ড ইমেজ যোগ করতে পারেন।
       This is dummy paragraph inside body tag.<br/>
      body has a background image <br/>
      this text is shown above an image because there is an image.<br/>
      I show how to set background image in a paragraph tag. <br/> 
      You can set background image with any block level element. <br/>
      এই লেখাগুলোর নিচে একটি ব্যকগ্রাউন্ড ইমেজ দেখতে পাচ্ছেন।<br/>
      আপনি চাইলে এভাবে যেকোন html element এর সাথে ব্যকগ্রাউন্ড ইমেজ যোগ করতে পারেন।
 
      -- Happy Coding
  
  </p>
</body>
</html>

ফলাফল

Next Previous

Background Image using CSS

Video Course

Learn on your schedule

Stay Home, Keep learning