fbpx
April 6, 2020
css images
CSS

CSS Images | Learn How to Design Image Properties in Web Document

In this article we will be discussing about CSS images. This tutorial will expose you to how you can adjust the image properties on your web document using CSS. In our previous tutorial we discussed about CSS text and how you can tweak them. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS Text | Learn How to Design Text in Web Document Using CSS

CSS Image properties

Images are very important when designing our web page. Developers should also have it in mind that the more images you use on your web page the slower the web page loading speed. so if you intend having a fast web page load speed you should be considering having fewer images on your web page.

With CSS we can set the below image properties to whatever our customization demands.

  • The image height
  • The image border
  • The image width
  • The -moz-opacity

The image height

CSS allows us adjust the height of images using the height property. example show below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>CSS IMAGE height illustration</title>
</head>
<body >
   <img style = "height: 30px;" src = "\develoferd/DEVELOFERD.jpg" />
      <br />
      <img style = "height: 80%;" src = "\develoferd/DEVELOFERD.jpg" />
</body>
</html>

Result

css images height property example

The image width

CSS allows us adjust the width of images using the width property. example show below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>CSS IMAGE width illustration</title>
</head>
<body >
   <img style = "width: 30px;" src = "\develoferd/DEVELOFERD.jpg" />
      <br />
      <img style = "width: 20%;" src = "\develoferd/DEVELOFERD.jpg" />
</body>
</html>

Result shown below

css images width property

The image border

Adding border to images can be easily achieved using the css image border property. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>CSS IMAGE Border illustration</title>
</head>
<body >
   <img style = " border: 0px;" src = "\develoferd/DEVELOFERD.jpg" />
   <br>
   <img style = "border:3px dashed red;" src = "\develoferd/DEVELOFERD.jpg" />
      <br />
      <img style = " border: 3px solid blue;" src = "\develoferd/DEVELOFERD.jpg" />
</body>
</html>

The codes above shows three images with zero border, dashed red border and strong blue border.

Result

css image border property

The image -moz-opacity

The image -moz-opacity is used to set the opacity of the image used on the web document. “moz” means Mozilla and its usually used to set the transparency or opacity of images when viewed with Mozilla. Internet explorer IE browers makes use of  filter:alpha(opacity=x) to set transparency in images.

Mozilla (-moz-opacity:x) x can have a unique value from 0.0 – 1.0. A lower value set the image more transparent.

IE (filter:alpha(opacity=x)) x can have a unique value from 0 – 100. A lower value sets the image more transparent.

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>CSS image opacity  illustration</title>
</head>
<body >
   <img  src = "C:\Users\DELL XPS\Desktop\develoferd ebooks\develoferd/DEVELOFERD.jpg" />
   <br>
   <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "C:\Users\DELL XPS\Desktop\develoferd ebooks\develoferd/DEVELOFERD.jpg" />
</body>
</html>

conclusion

The CSS image properties listed above are needed when styling your image for a web document. A good understanding of this property will enable you make good web page image formatting and structure. Lets move on to the next topic on CSS LINKS

Leave a Reply

Your email address will not be published. Required fields are marked *