How to create a Hero Image using HTML and CSS ?

30 Sep, 2021
Hero image can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and design the basic structure. The second section design the image and texts on the images. The hero image looks attractive when you are using it as a banner. Suppose you want to inform others about your newly added features then it will be the best procedure to proceed to use those features. 
Creating Structure:
In this section, we will create the basic structure for the hero image cover picture. We will attach the image and put the text that will be placed on the image in the next section.
HTML code: The HTML code is used to create a structure of hero image. Since it does not contain CSS so it is just a simple structure. We will use some CSS property to make it attractive.
HTML
<!DOCTYPE html><html> <head>    <title>Create a hero image</title></head> <body>    <div class="container">                     <!-- background image -->        <img class="gfg" src="https://media.geeksforgeeks.org/wp-content/uploads/20191213145442/img40.png">         <!-- title and tag line with button -->        <div class="logo">                         <h1>GeeksforGeeks</h1>              <p>A Computer Science Portal for Geeks</p>              <button>Hire with Us</button>        </div>    </div></body> </html>
Designing the Structure:
In the previous section, we have created the structure of the basic web-page and now we are going to use the hero image with the title, tag, and a button. We will design the structure in this section.
CSS code: CSS code is used to make an attractive website. This CSS property is used to make the hero image attractive and eye catching.
HTML
<style>                 /* blurring the image */    .gfg {        filter: blur(5px);        width: 100%;    }                 /* designing title and tag line */    .logo {        text-align:center;        position: absolute;        font-size: 18px;        top: 50px;        left: 27%;        color: white;    }    h1, p {        border: 4px solid white;        padding: 10px 50px;        position: relative;        border-radius: 10px;        font-family: Arial, Helvetica, sans-serif;    }    h1:hover {        background: -webkit-linear-gradient( green, lime);        -webkit-background-clip: text;        -webkit-text-fill-color: transparent;    }                 /* Designing button */    .logo button {        border: none;        outline: 0;        display: inline-block;        padding: 10px 25px;        color: black;        background-color: #ddd;        text-align: center;        cursor: pointer    }    .logo button:hover {        background-color: green;        color: white;    }</style>
Combining the HTML and CSS Code: This examples combine both HTML and CSS code to design Hero image. 
HTML
<!DOCTYPE html><html> <head>    <title>Create a hero image</title>         <style>                     /* blurring the image */        .gfg {            filter: blur(5px);            width: 100%;        }                     /* designing title and tag line */        .logo {            text-align:center;            position: absolute;            font-size: 18px;            top: 50px;            left: 27%;            color: white;        }        h1, p {            border: 4px solid white;            padding: 10px 50px;            position: relative;            border-radius: 10px;            font-family: Arial, Helvetica, sans-serif;        }        h1:hover {            background: -webkit-linear-gradient( green, lime);            -webkit-background-clip: text;            -webkit-text-fill-color: transparent;        }                     /* Designing button */        .logo button {            border: none;            outline: 0;            display: inline-block;            padding: 10px 25px;            color: black;            background-color: #ddd;            text-align: center;            cursor: pointer        }        .logo button:hover {            background-color: green;            color: white;        }    </style></head> <body>    <div class="container">                     <!-- background image -->        <img class="gfg" src="https://media.geeksforgeeks.org/wp-content/uploads/20191213145442/img40.png">         <!-- title and tag line with button -->        <div class="logo">                         <h1>GeeksforGeeks</h1>              <p>A Computer Science Portal for Geeks</p>              <button>Hire with Us</button>        </div>    </div></body> </html>
Output: 
 
kalrap615
arorakashish0911
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property