Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to add transparent image or writing text on an existing image using CSS

This article will allow you to overlap images such that the overlapping image would be transparent. Also it tells how to add text over an image using CSS.

Suppose you have two images which would look perfect when overlapped over each other or you want to write some description of image over image itself without changing the image.In these cases this article will be of great use.

The article is really easy to understand for all beginners and require very little knowledge of CSS and HTML.

Listing 1: Code for overlapping images

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Making image transparent</title>
<style type="text/css">
div.div1
  {
  width:600px;
  height:300px;
  background:url(1.jpg) repeat;
  }
div.div2
  {
  width:700px;
  height:250px;
  margin:10px 250px;
  opacity:0.4;
  filter:alpha(opacity=40); 
  }

</style>
</head>
<body>
<div class="div1">
<div class="div2">
<img class='imagem_artigo'  src="2.jpg" width="300" height="270"/>
</div>
</div>
</body>
</html>

Explaination

  1. The css has been included in the same page.
  2. First , we come to the body part. Here we have added 2 div .
  3. The class name of first div is div1.
  4. div1 is responsible for adding the background image on the div. The width and height are set to be 600px and 300px respectively .We added the background image using background:url(1.jpg) repeat .Here , url contains the path of image which will be displayed in the background.We used repeat s o that the background image pattern will repeat itself.
  5. Inside the first div we include another div named div2.
  6. div2 contains an image which is the image which we want to overlap the background image
  7. Now we set the property of div2 so that transparency is introduced in the overlapping image.
  8. The width and height are set to be 700px and 250px respectively for the overlapping image.
  9. Now we set the opacity to some value which define the extent to which the image gets transparent like here we gave opacity:0.4 which set image opacity to 40%
  10. For IE 8 or earlier version you need to use filter:alpha(opacity=40); for setting the opacity

Listing 2: Code for writing text on image

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Making image transparent</title>
<style type="text/css">
div.div1
  {
  width:600px;
  height:300px;
  background:url(1.jpg) repeat;
  }
div.div2
  {
  width:400px;
  height:250px;
  margin:10px 200px;
  opacity:0.4;
  filter:alpha(opacity=40);
  }
p
{
color:#ffffff;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<p>The Ultimate Dragon...</p>
</div>
</div>
</body>
</html>

Explanation :

  1. We made a very small change so that this time we are writing a transparent text on our background image
  2. We don’t make any changes to coding of outer div ie div having class div1
  3. In inner div with class div2 we make a small change. We changed the margin value in css so that our transparent text appears at particular place on the background image.
  4. Now instead of defining a image inside inner div2 ,we introduced a text using p(paragraph) tag.
  5. We write the content which we want to display and then we set its property using css
  6. In css for the paragraph we change its color so that it comes in white color(#ffffff)

Code for overlapping images

Figure 1: Overlapping images

Code for writing text on image

Figure 2: Writing text on image

I hope you liked the article. See you next time with some more interesting articles.



My main area of specialization is Java and J2EE. I have worked on many international projects like Recorders,Websites,Crawlers etc.Also i am an Oracle Certified java professional as well as DB2 certified

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login