Lesson 4 – CSS3 Images

You can also add as many images in your webpage as you want using CSS3. It helps you control the image display through various properties such as image height and width.

First of all, we will learn how to set image height and width in CSS3.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 Images</title>
</head>
<body>
    
aircraft
</body> </html>

Final output will be as under.

It is also possible to add background image to an element using CSS3. We will use the background-image or simply the background property with the value of URL(‘url of the image’) to accomplish this task.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>CSS3 Images</title>
  <style>
    .img {
    background-image: url('./aircraft-2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    width: 400px;
}

p {
    color: #fff;
    font-size: 20px;
    text-align: center;
}

 </style>

</head>
<body>
    

Adding a background image to element using CSS3

</body> </html>

As you can see, the above example have some additional style rules, each of which has a different function.

  • Background-repeat property prevents the background image from repeating itself again and again.
  • Background-position property positions the background image according to the assigned value.
  • Background-size property sets the size of the background image. The Background-size property with the cover value makes the image to covers the entire background area of an element.

Here is the final output.

Similarly, if you want to add a border to the images, you can do so by using the border property. Once again, you can either use percentage or integers to define the border height. Take a look at the following style rules.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>CSS3 Images</title>
</head>
<body>
    <img src="aircraft.jpg" alt="aircraft" style="border: 1px solid black">
    <br>
    <img src="aircraft.jpg" alt="aircraft" style="border: 3px dashed rgb(255, 0, 0)">

</body>
</html>

The output of the above code will be as under.

In the next lecture, we will study CSS Fonts and Text properties in detail.