| Previous | Home | Next |
The <image> CSS data type represents a 2D image. There are two kinds of images in CSS: plain static images, often referenced using a URL, and dynamically-generated images like gradients or representations of parts of the tree.
CSS determines the concrete object size using these intrinsic dimensions, the specified size defined by CSS properties like width, height or background-size, and the default object size defined by the kind of property the image is used with:
- background-image: The size of the element's background positioning area.
- list-style-image: The size of a character of 1em.
- border-image: The size of the element's border image area.
Images are very important part of any Web Page. Though it is not recommended to include lot of images but it is still important to use good images wherever it is required. CSS plays a good role to control image display. You can set following image properties using CSS.
The border property is used to set the width of an image border.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.
The height property is used to set the height of an image.The height property of an image is used to set the height 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.
The width property is used to set the width of an image.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.
The -moz-opacity property is used to set the opacity of an image.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. IE uses filter:alpha(opacity=x) to create transparent images.
<html>
<head>
<title>Image in css</title>
<style>
p.one{
height:200px;
width:200px;
background-image:url(nature.jpg);
}
</style>
</head>
<body>
<p class="one">Hummer</p>
</body>
</html>
Output
| Previous | Home | Next |