How to create a Hero Image with CSS?
A hero image is an oversized banner image at the top of the website. It is used by commercial websites for product offers or new features. We can create a Hero image using HTML elements and CSS properties.
Creating a Hero image with CSS
The hero image can contain a background image which we can add by using CSS background-image property. Further use background-size:cover to completely fill the parent container image and add background-position:center to properly center the image.
Add the position:absolute property to position the text over the image and use left, right properties to align the text. We must set the height of HTML and body elements to 100%. Let's see the example below.
Example: Creating a Hero Image
In this example, we have created a hero image by using some CSS and HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
body , html {
height: 100%;
}
.container {
position: relative;
background-image: url("https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627476216-101156.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.text {
text-align: center;
position: absolute;
left : 30%;
top: 30%;
width: 50%;
background-color: rgba(256 , 256,256,0.5);
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
<h2> Hero image </h2>
<p> Here we have created a hero image </p>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Adding buttons over hero images
Here, we have added a button to the hero image.
Conclusion
In this tutorial, we have created a hero image with CSS. We can use background-image to add a hero image and customize it with other properties. Further text and buttons or any other element can be added to it.
