How to create a Hero Image using HTML and CSS ?

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Create a hero image</title>
    </head>
      
    <body>
        <div class="conatiner">
                  
            <!-- background image -->
            <img class="gfg" src=
      
            <!-- 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>

    chevron_right

    
    

    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 the attractive website. This CSS property is used to make the hero image attractive and eye catching.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
                  
        /* bluring 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>

    chevron_right

    
    

Combining the HTML and CSS Code: This examples combine both HTML and CSS code to design Hero image.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Create a hero image</title>
      
    <style>
              
        /* bluring 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="conatiner">
              
        <!-- background image -->
        <img class="gfg" src=
  
        <!-- 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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.