Hello dear readers! welcome back to another section of my tutorial on Css. In my last tutorial i talked about Css Text and now i want to discuss about the Css Images. I believe by now you all are familiar with images in web development because i also discussed about Html Images in our tutorials on Html.
Images play an important role in any webpage. Though it is not recommended to include alot of images in a webpage, but it is still important to use good images wherever required.
Css plays a good role to control image display. You can set the following image properties using Css.
- The border property is used to set the width of an image border.
- The height property is used to set the height of an image.
- The width property is used to set the width of an image.
- The -moz-opacity property is used to set the opacity of an image.
The Image Border Property
The border property of an image is used to set the width of an image border. This property can have a value in length or in %. A width of zero pixels means no border.
Below is an example of how to set the width of an image border.
<html>
<head>
</head>
<body>
<img style="border: 0px;" src="/images/css.gif" />
<br />
<img style="border: 4px;" src="/images/css.gif" />
</body>
</html>
<head>
</head>
<body>
<img style="border: 0px;" src="/images/css.gif" />
<br />
<img style="border: 4px;" src="/images/css.gif" />
</body>
</html>
The Image Height Property
The height property of an image is used to set the height of an image. This property can have a value in length in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example below.
<html>
<head>
</head>
<body>
<img style="border: 0px solid blue; height: 60px;" src="/images/css.gif" />
<br />
<img style="border: 4px solid blue; height: 80px;" src="/images/css.gif" />
</body>
</html>
<head>
</head>
<body>
<img style="border: 0px solid blue; height: 60px;" src="/images/css.gif" />
<br />
<img style="border: 4px solid blue; height: 80px;" src="/images/css.gif" />
</body>
</html>
The Image Width Property
The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example below.
<html>
<head>
</head>
<body>
<img style="border: 0px solid blue; width: 60px;" src="/images/css.gif" />
<br />
<img style="border: 4px solid blue; width:80px;" src="/images/css.gif" />
</body>
</html>
<head>
</head>
<body>
<img style="border: 0px solid blue; width: 60px;" src="/images/css.gif" />
<br />
<img style="border: 4px solid blue; width:80px;" src="/images/css.gif" />
</body>
</html>
The -moz-opacity Property
The -moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in mozilla. Internet Explorer makes use of filter:alpha(opacity=x) to create transparent images.
In Mozilla (-moz-opacity:x), x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same thing goes for CSS3-valid syntax opacity:x).
In IE (filter:alpha(opacity=x)), x can be a value from 0 - 100. A lower value makes the element more transparent.
Here is an example below.
<html>
<head>
</head>
<body>
<img style="border: 2px solid blue; -moz-opacity: 0.5; filter: alpha(opacity=50);" src="/images/css.gif" />
</body>
</html>
<head>
</head>
<body>
<img style="border: 2px solid blue; -moz-opacity: 0.5; filter: alpha(opacity=50);" src="/images/css.gif" />
</body>
</html>
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about CSS Links.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.